Создание первого сервис-воркера с Workbox

Для начала необходимо подключить библиотеку Workbox. В современных проектах предпочтительно использовать пакет workbox-sw через npm:

npm install workbox-sw --save-dev

После установки создается сервис-воркер, например sw.js, и регистрируется в основном скрипте приложения:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(registration => {
      console.log('Service Worker зарегистрирован:', registration);
    })
    .catch(error => {
      console.error('Ошибка при регистрации Service Worker:', error);
    });
}

Инициализация Workbox в сервис-воркере

В файле sw.js подключается Workbox и определяется конфигурация кэширования:

importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.6.0/workbox-sw.js');

if (workbox) {
  console.log('Workbox загружен успешно');
} else {
  console.error('Ошибка загрузки Workbox');
}

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

Кэширование статических ресурсов

Для кэширования файлов CSS, JS, изображений и шрифтов используется стратегия CacheFirst. Эта стратегия сначала ищет ресурс в кэше, и если он отсутствует — запрашивает его из сети:

workbox.routing.registerRoute(
  ({request}) => request.destination === 'style' ||
                 request.destination === 'script' ||
                 request.destination === 'font',
  new workbox.strategies.CacheFirst({
    cacheName: 'static-resources',
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 50,
        maxAgeSeconds: 30 * 24 * 60 * 60, // 30 дней
      }),
    ],
  })
);

Ключевые моменты:

  • cacheName задает отдельный кэш для конкретного типа ресурсов.
  • ExpirationPlugin позволяет автоматически очищать устаревшие записи.

Кэширование динамического контента

Для API-запросов лучше использовать стратегию NetworkFirst, которая сначала обращается к сети, а при отсутствии соединения возвращает кэшированную версию:

workbox.routing.registerRoute(
  ({url}) => url.origin === 'https://api.example.com',
  new workbox.strategies.NetworkFirst({
    cacheName: 'api-responses',
    networkTimeoutSeconds: 3,
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 100,
        maxAgeSeconds: 5 * 60, // 5 минут
      }),
    ],
  })
);

Особенности стратегии NetworkFirst:

  • Быстрое обновление данных из сети.
  • Автоматический fallback на кэш при недоступности сервера.
  • Ограничение времени ожидания сети предотвращает зависание приложения.

Префетчинг и precache

Workbox поддерживает автоматическое кэширование ресурсов на этапе установки сервис-воркера с помощью precacheAndRoute:

workbox.precaching.precacheAndRoute([
  {url: '/', revision: '1'},
  {url: '/index.html', revision: '1'},
  {url: '/styles/main.css', revision: '1'},
  {url: '/scripts/app.js', revision: '1'},
]);

Пояснения:

  • revision используется для версионирования ресурсов.
  • При изменении файла с новым revision кэш автоматически обновляется.

Управление событиями сервис-воркера

Workbox позволяет отслеживать жизненный цикл сервис-воркера через стандартные события:

self.addEventListener('install', event => {
  console.log('Сервис-воркер установлен');
});

self.addEventListener('activate', event => {
  console.log('Сервис-воркер активирован');
  event.waitUntil(clients.claim());
});

self.addEventListener('fetch', event => {
  console.log('Запрос перехвачен:', event.request.url);
});

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

Использование плагинов Workbox

Workbox включает множество плагинов для расширения функциональности:

  • ExpirationPlugin — управление сроком хранения и количеством объектов в кэше.
  • CacheableResponsePlugin — кэширование только ответов с определенными статусами или заголовками.
  • BroadcastUpdatePlugin — уведомление клиентов о новых версиях ресурсов.

Пример применения нескольких плагинов одновременно:

workbox.routing.registerRoute(
  ({request}) => request.destination === 'image',
  new workbox.strategies.CacheFirst({
    cacheName: 'images-cache',
    plugins: [
      new workbox.expiration.ExpirationPlugin({maxEntries: 100, maxAgeSeconds: 7 * 24 * 60 * 60}),
      new workbox.cacheableResponse.CacheableResponsePlugin({statuses: [0, 200]}),
    ],
  })
);

Стратегии кэширования и их выбор

Workbox предлагает несколько основных стратегий:

  • CacheFirst — для редко меняющихся ресурсов (статические файлы, шрифты).
  • NetworkFirst — для динамических данных (API, JSON).
  • StaleWhileRevalidate — возвращает кэш мгновенно и обновляет ресурс в фоне.
  • NetworkOnly и CacheOnly — для особых случаев, когда нужен полный контроль.

Выбор стратегии зависит от типа ресурса, требований к свежести данных и скорости отклика.

Отладка и мониторинг

Workbox интегрируется с DevTools в браузере. Полезные инструменты:

  • Вкладка Application → Service Workers — просмотр зарегистрированных сервис-воркеров.
  • Вкладка Cache Storage — управление кэшами.
  • Включение workbox.setConfig({debug: true}) для подробного логирования в консоли.

Вывод

После настройки Workbox сервис-воркер обеспечивает:

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

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

Оглавление