В наши дни, готовясь к сертификационному экзамену Google Mobile Specialist Certification, нужно научиться разрабатывать PWA (прогрессивные веб-приложения).

Разработка PWA включает в себя:
1. Адаптивный веб-дизайн, также известный как RWD (медиа-запросы, отзывчивость изображений, точки останова, сетка, Flexbox)
2. Лучшие практики для создания приложения (доступность, оптимизация)
3. Service Workers (сетевой прокси между клиентом и сервером)

Сначала я расскажу о сервисных работниках.

Сервис-воркеры могут перехватывать пользовательские запросы, которые отправляются на сервер для ответа, и могут изменять запрос по нашей команде. Возьмем простой пример: когда сервер отключен и не отвечает, я хочу отображать настраиваемое автономное сообщение вместо игры T-Rex.

SW - это процедура, основанная на событиях, для работы в браузере клиента.

  1. Зарегистрируйтесь (с помощью navigator.serviceWorker)
  2. Установить (при появлении нового ПО появляется возможность добавить файлы в кеш)
  3. Активировать (при появлении нового ПО появляется возможность удалить старые файлы кеша)
  4. Fetch (каждая запускаемая страница загружается, здесь есть шанс перехватить сетевые запросы)

Лучшая методика при работе с ПО - Cache First. Средство сначала проверяет файлы в кеше, если они недоступны, то получить из сети.

self.addEventListener('fetch', fetchEvent => {
   
   const request = fetchEvent.request;
   
   fetchEvent.respondWith(
      // First check from cache
      caches.match(request)
      .then( responseFromCache => {
         if (responseFromCache) {
           return responseFromCache
         }
       })
      // Otherwise get from network
       return fetch(request);
   ) // end respondWith
});

Так же, как мы можем делать выборку из сети, если она не в сети, а затем показывать индивидуальную офлайн-страницу.

self.addEventListener('fetch', fetchEvent => {
   
   const request = fetchEvent.request;
   
   fetchEvent.respondWith(
      
       return fetch(request)
         // Get offline page from cache
         .catch(error => {
            return caches.match('/offline.html');
           // Page must be saved in cache while install event
         });
   ) // end respondWith
});

Даже мы можем кэшировать изображения в отдельном кеше для лучшего управления кешем в вашем ПО.

if (request.headers.get('Accept').includes('image')) {
  // First clone the image request
  const copy = responseFromFetch.clone();
  fetchEvent.waituntil(
    caches.open(imageCacheName)
      .then(imageCache => {
        // Save in Cache
        return imageCache.put(request, copy)
      })
  );
}

Это похоже на использование блоков Lego, где когда-либо нужно использовать этот блок для удовлетворения ваших требований. Так что просто подумайте о любой блочной структуре и реализуйте ее таким образом.

Надеюсь, это даст вам общее представление о сервис-воркере 👳‍