PWA - это сочетание традиционных веб-сайтов и мобильных приложений. Они создаются с использованием традиционных веб-технологий, таких как HTML, CSS, JavaScript, с использованием некоторых современных методов, таких как манифест веб-приложения и сервис-воркеры, в результате чего они действуют как собственное приложение. По данным pwastats.com, компании, перешедшие на PWA, получили больше активных пользователей, коэффициент конверсии и время взаимодействия с ними резко увеличились. Было обнаружено, что PWA повышают производительность почти на 100%. Так что превратить свой веб-сайт в PWA - определенно хорошая идея. В этой статье я расскажу, как этого добиться.

Процесс преобразования включает всего два шага после того, как у вас есть адаптивный веб-сайт, вам просто нужно добавить файлы menifest.json и service worker. Теперь давайте углубимся в эти два файла.

Манифест веб-приложения

Это простой файл JSON, содержащий метаданные о вашем приложении. Этот файл имеет следующие свойства.

name: название приложения.

short_name: имя, которое будет отображаться, когда пространство ограничено

start_url: начальная точка приложения. В нашем случае мы поставим «.», поэтому, когда пользователь запускает приложение, оно будет запускаться из корня документа.

scope: набор URL-адресов для навигации по вашему приложению.

значки: здесь вы можете определить набор массивов, содержащих информацию о значках, такую ​​как URL-адрес, размер и тип.

theme_color: определяет цвет заголовка.

background_color: цвет заставки при запуске приложения.

display: сообщает системе, как она должна отображать ваше приложение. Доступные значения: автономный, минимальный интерфейс, полноэкранный режим. Наиболее предпочтительное значение - автономный, при этом панель URL-адреса вверху будет скрыта.

Вам необходимо создать файл manifest.json в корневой папке и заполнить информацию, как показано ниже.

{
  "name": "My first PWA",
  "short_name": "PWA",
  "start_url": ".",
  "scope": "./",
  "icons": [
    {
      "src": "icon.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icon.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#fff",
  "background_color": "#333",
  "display": "standalone"
}

После создания файла вам необходимо включить тег ссылки в файл index.html, как показано ниже.

<link rel="manifest" href="manifest.json">

Теперь ваш сайт можно установить на устройство. Следующим шагом будет добавление сервис-воркера, который сделает наше приложение более мощным.

Сервисный работник

Это файл javascript, содержащий сценарии, которые выполняются в фоновом режиме в другом потоке. Он отвечает за кеширование, обработку сетевых запросов, поддержку в автономном режиме, push-уведомления.

Чтобы реализовать сервис-воркер, нам нужно выполнить три шага, указанные ниже:

Зарегистрироваться

Браузер должен проверить, доступны ли сервис-воркеры. Затем, чтобы зарегистрировать нашего сервис-воркера, нам нужно написать следующий код в ourapp.js.

if (navigator.serviceWorker.controller){
 console.log("Service worker found")
}
else {
  navigator.serviceWorker.register(‘/serviceWorker.js’)
 .then(reg => console.log(‘Successfully Registered’))
 .catch(err => console.log(‘Can't Register’,   err));
}

В приведенном выше коде первая строка проверяет, существует ли свойство serviceworker в навигаторе или нет, если да, нет необходимости регистрировать новое. Если его не существует, нам нужно зарегистрировать его, вызвав метод register, который вызовет наш service-worker.js файл.

Установить

Теперь создайте новый файл как serviceWorker.js добавьте следующие строки. Здесь мы напишем код для установки нашего сервис-воркера, а также увидим, как кэшировать файлы для офлайн-поддержки.

let MY_CACHE = 'my-cache'
let filesToCache = [
    'scripts/index.js',
    'css/style.css',
    'assets/images/'
]
self.addEventListener("install", (event) => {
   event.waitUntil(
    caches.open(MY_CACHE)
     .then( (cache) => {
           console.log('Opened cache')
      return cache.addAll(urlsToCache)
       })
     .then(() =>{
          console.log("Install completed")
       })
     )
})

В приведенном выше коде MY_CACHE - это переменная, используемая для открытия кеша. filesToCache - это список файлов, которые вы хотите кэшировать. caches.open принимает MY_CACHE в качестве аргумента, он возвращает обещание. После открытия кеш cache.addAll забирает все файлы, которые должны быть доступны офлайн.

Получить

Событие Fetch используется для операций с кешированными файлами. В приведенном ниже коде показано, есть ли у нас уже кэшированные файлы, тогда они будут немедленно возвращены из кеша, и нет необходимости загружать их из сети. в противном случае мы получим их из сети.

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then( cacheRes => {
        return cacheRes || fetch(evt.request)
      }
    )
  );
});

В приведенном выше коде метод responseWith возвращает обещание, которое преобразуется в запись кэша, соответствующую запросу. Но этот код рекомендуется только для статического контента. Для динамического контента нам нужно изменить код, как показано ниже.

let MY_CACHE = 'my-cache-v1';
let MY_DYNAMIC_CACHE = 'my-dynamic-cache-v1'
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(keys => {
      return Promise.all(keys
        .filter(key =>  key !== MY_CACHE)
        .map(key => caches.delete(key))
      );
    })
  );
});
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(cacheRes => {
         return cacheRes || fetch(event.request)
         .then(fetchRes => {
            return caches.open(MY_DYNAMIC_CACHE).then(cache => {
               cache.put(event.request.url, fetchRes.clone());
               return fetchRes;
        })
      });
    })
  );
});

Чтобы сделать кеширование динамическим, нам нужно изменить имя кеша. Так что для нас было бы проще, если бы мы предоставили имя версии в нашем кеше таким образом, нам просто нужно изменить версию перед внесением изменений.

Нам нужно удалить все старые кеши, для этого у нас есть caches.keys method, который возвращает ключи предыдущих кешей. После получения этих ключей мы можем выполнять операции по их удалению.

Затем, если какой-либо файл отсутствует в кеше, мы делаем запрос на его получение с сервера. Получив ресурс в качестве ответа, мы его кешируем. На этот раз мы не можем использовать метод addAll, потому что этот метод кэширует ресурсы, поступившие с сервера напрямую, но здесь мы уже получили ресурс с помощью fetch(event.request)method, теперь нам просто нужно кэшировать ресурс, который он вернул. Итак, в этом случае мы можем использовать метод cache.put(), он берет URL-адрес, в который мы помещаем ресурсы, и сам ресурс.

Это все, что вам нужно сделать для PWA. Это очень просто, но эффективно для современных веб-сайтов. Надеюсь, вам понравился этот урок, и вы сочли его полезным. Если у вас есть вопросы, оставьте их в разделе комментариев.

Не стесняйтесь обращаться ко мне по адресу [email protected].