Service Worker — это API браузера. Это скрипт, который запускается браузером в фоновом режиме и позволяет кэшировать активы, обрабатывать push-уведомления, фоновую синхронизацию и многое другое. С помощью сервис-воркеров вы можете сделать свою страницу доступной, даже если вы не в сети.

Некоторые моменты о сервис-воркере:

  • Это сетевой прокси. Он перехватывает звонки, отправленные с вашей страницы.
  • Он работает в рабочем контексте, в потоке, отличном от основного потока JS, и, следовательно, не может получить доступ к DOM. Но он может общаться с вашей страницей через сообщения, а затем ваша страница может обрабатывать манипуляции с DOM.
  • Поскольку он работает в отдельном потоке, он не блокируется.
  • Он асинхронный по своей природе и активно использует промисы.
  • Он имеет доступ к API IndexedDB.

Вы можете использовать сервис-воркер на localhost или с https на своем сервере. Он не работает по http из соображений безопасности.

Жизненный цикл сервисного работника

  1. Регистрация. Вам необходимо зарегистрировать сервисного работника со своей страницы JS. Обычно вы поддерживаете отдельный файл, посвященный сервис-воркеру. В приведенном ниже примере мы используем файл sw.js, который находится в корневом каталоге вашего приложения.
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js').then(
      function(registration) {
        // Registration was successful
        console.log('ServiceWorker registration successful');
      }, function(err) {
        // registration failed :(
        console.log('ServiceWorker registration failed: ', err);
      }
     );
  });
}

2. Установить: Это заставит браузер начать процесс установки (если сервисный работник еще не установлен для вашей страницы) в фоновом режиме. Это дает вам пространство, где вы можете решить, что вы хотите делать на этом этапе установки. Как правило, вы кэшируете статические ресурсы своей страницы.

Вы можете прослушать событие install и в обратном вызове написать код для кэширования файлов.

const CACHE_NAME = 'cache-v1';
const urlsToCache = [
  '/',
  '/styles/main.css',
  '/script/main.js'
];

self.addEventListener('install', (event) => {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

3. Активировать: после установки он вступает в фазу активации, где вы можете управлять своими старыми кэшами. Например, если вы измените свой файл сервис-воркера (здесь sw.js), браузер идентифицирует его и установит новый сервис-воркер. Старый сервис-воркер будет убит при следующей перезагрузке страницы (в основном, когда больше не будет загруженных страниц, которые все еще используют старый сервис-воркер), а новый сервис-воркер возьмет на себя управление, и его activate event будет запущен. В обратном вызове активации, если вам больше не нужен старый кеш, вы можете удалить его.

4. После этапа активации сервисный работник теперь может обрабатывать запросы на выборку, поступающие с вашей страницы. Вы можете прослушать fetch событие.

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }
        // send network request if not found in cache       
        return fetch(event.request); 
      }
    )
  );
});