Прежде всего, давайте зададимся вопросом, почему название этой статьи именно такое? Ну, чтобы ответить, мы должны знать, каковы требования для создания прогрессивных веб-приложений. И к этому моменту, просматривая заголовок и вопрос вперед и назад, вы, вероятно, правильно догадались, да, это сервисный работник.

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

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

Итак, без лишних слов, давайте начнем пачкать руки.

Определение сервисного работника

В MDN сервис-воркеры по сути действуют как прокси-серверы, которые находятся между веб-приложениями, браузером и сетью (если они доступны).

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

Сервисный работник запускается в рабочем контексте: поэтому он не имеет доступа к DOM и работает в потоке, отличном от основного потока JavaScript, на котором работает ваше приложение, поэтому он не блокирует. Он разработан, чтобы быть полностью асинхронным; как следствие, такие API, как синхронный XHR и Web Storage, не могут использоваться внутри сервис-воркера.

Каковы особенности сервисных работников?

Сервисные работники — это специализированные активы JavaScript, которые действуют как прокси-серверы между веб-браузерами и веб-серверами. Они стремятся повысить надежность, предоставляя автономный доступ, а также повышая производительность страницы.

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

Для того чтобы сервис-воркер мог управлять страницей, она должна быть, так сказать, сначала создана. Давайте начнем с того, что происходит, когда новый сервис-воркер развертывается для веб-сайта без активного сервис-воркера.

Постановка на учет

Регистрация — это начальный этап жизненного цикла сервис-воркера:

<!-- In index.html, for example: -->
<script>
  // Don't register the service worker
  // until the page has fully loaded
  window.addEventListener('load', () => {
    // Is service worker available?
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/sw.js').then(() => {
        console.log('Service worker registered!');
      }).catch((error) => {
        console.warn('Error registering service worker:');
        console.warn(error);
      });
    }
  });
</script>

Монтаж

Сервисный работник запускает свое событие install после регистрации. install вызывается только один раз для каждого сервисного работника и не будет запускаться снова, пока не будет обновлено. Обратный вызов для события install можно зарегистрировать в рабочей области с помощью addEventListener:

// /sw.js
self.addEventListener('install', (event) => {
  const cacheKey = 'CacheName_v1';

  event.waitUntil(caches.open(cacheKey).then((cache) => {
    // Add all the assets in the array to the 'CacheName_v1'
    // `Cache` instance for later use.
    return cache.addAll([
      '/src/index.html',
      '/src/css/style.css'
    ]);
  }));

Это создает новый экземпляр Cache и предварительно кэширует ресурсы. Позже у нас будет много возможностей поговорить о предварительном кэшировании, так что давайте сосредоточимся на роли event.waitUntil. event.waitUntil принимает обещание и ждет, пока это обещание не будет разрешено. В этом примере обещание выполняет две асинхронные операции:

  1. Создает новый экземпляр Cache с именем 'MyFancyCache_v1'.
  2. После создания кеша массив URL-адресов активов предварительно кэшируется с использованием его асинхронного метода addAll.

Установка завершится ошибкой, если обещания, переданные event.waitUntil, будут отклонены. В этом случае сервис-воркер отбрасывается.

Если обещано разрешить, установка пройдет успешно, и состояние сервис-воркера изменится на 'installed', а затем активируется.

И это все для этой статьи, вы можете просмотреть подробную документацию, предоставленную в chrome и mdn.

Спасибо!!