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

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

Жизненный цикл сервис-воркера состоит из нескольких ключевых этапов: регистрация, установка, активация, работа с сообщениями и событиями fetch. Каждый этап имеет свои особенности и возможности для оптимизации приложений.

Регистрация сервис-воркера

Регистрация сервис-воркера выполняется в основном скрипте страницы через метод navigator.serviceWorker.register. Workbox позволяет облегчить эту задачу с помощью функции workbox-window:

import { Workbox } from 'workbox-window';

const wb = new Workbox('/service-worker.js');

wb.register();

Ключевые моменты регистрации:

  • Версия воркера: Workbox автоматически добавляет хэш к имени скрипта, что помогает управлять обновлениями.
  • Подписка на события: Workbox позволяет отслеживать события installed, activated, waiting, что важно для корректного обновления кэшированных ресурсов.
  • Отложенное обновление: Можно использовать стратегию “skipWaiting”, чтобы активировать новый сервис-воркер сразу после установки, минуя ожидание закрытия всех вкладок.

Этап установки (install)

На этапе установки сервис-воркер обычно подготавливает кэш ресурсов. Workbox предоставляет удобные методы для этого через стратегию precache:

import { precacheAndRoute } from 'workbox-precaching';

precacheAndRoute([
  { url: '/index.html', revision: '12345' },
  { url: '/styles/main.css', revision: '12345' },
]);

Особенности этапа установки:

  • Кэширование ресурсов: precacheAndRoute автоматически сохраняет файлы в кэш и создает маршруты для их последующей отдачи.
  • Контроль версий: При изменении ревизии файла Workbox удаляет старые версии из кэша.
  • Асинхронность: install событие выполняется асинхронно, и сервис-воркер не перейдет к следующему этапу, пока промисы не будут выполнены.

Этап активации (activate)

После успешной установки происходит активация. На этом этапе сервис-воркер получает контроль над клиентами (вкладками) и может выполнять очистку устаревшего кэша.

self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      return Promise.all(
        cacheNames.map((cache) => {
          if (cache !== 'my-cache-v2') {
            return caches.delete(cache);
          }
        })
      );
    })
  );
});

Особенности активации с Workbox:

  • Автоматическая очистка старых кэшей: Workbox использует стратегию cleanupOutdatedCaches, чтобы удалять устаревшие версии кэша.
  • skipWaiting и clients.claim(): Эти методы позволяют новому воркеру сразу взять управление над вкладками без необходимости их перезагрузки.
  • События активации: Можно подписываться на activated событие через workbox-window для уведомления интерфейса о готовности нового воркера.

Перехват и управление запросами (fetch)

После активации сервис-воркер начинает перехватывать сетевые запросы. Workbox предоставляет готовые стратегии кэширования:

import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate } from 'workbox-strategies';

registerRoute(
  ({ request }) => request.destination === 'image',
  new StaleWhileRevalidate({
    cacheName: 'images-cache',
  })
);

Основные стратегии Workbox:

  1. Cache First: Сначала ищет в кэше, затем обращается к сети.
  2. Network First: Сначала обращается к сети, при сбое использует кэш.
  3. Stale While Revalidate: Отдает кэш сразу, а сетевой ответ обновляет кэш в фоне.
  4. Network Only / Cache Only: Чистые стратегии без комбинаций.

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

Работа с обновлениями

Обновление сервис-воркера — критический момент. Workbox упрощает управление:

  • Контроль состояния: Workbox позволяет отследить, когда новый воркер установлен, но ждет активации.
  • Принудительная активация: skipWaiting() используется внутри воркера, чтобы активировать новую версию немедленно.
  • Уведомление клиентов: С помощью событий waiting и методов postMessage можно уведомлять вкладки о доступности обновлений.

События сообщений и коммуникация с клиентом

Workbox поддерживает двустороннюю связь между сервис-воркером и клиентом. Основные сценарии:

  • Передача уведомлений о новых версиях кэша.
  • Обновление интерфейса при изменении офлайн-данных.
  • Выполнение задач в фоне, например синхронизация данных при восстановлении сети.

Пример обработки сообщений в сервис-воркере:

self.addEventListener('message', (event) => {
  if (event.data && event.data.type === 'SKIP_WAITING') {
    self.skipWaiting();
  }
});

Оптимизация жизненного цикла

  • Сегментация кэша: Использование отдельных кэшей для разных типов ресурсов (images, scripts, styles) повышает эффективность управления и удаления устаревших данных.
  • Минимизация блокирующих операций: Все асинхронные задачи должны выполняться через event.waitUntil, чтобы не замедлять установку и активацию.
  • Мониторинг событий: Подписка на события install, activate, fetch, message позволяет детально контролировать поведение воркера и устранять потенциальные конфликты обновлений.

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

Оглавление