Пакет workbox-sw для тестирования

Для использования workbox-sw необходимо подключить библиотеку в сервис-воркере. Самый распространённый способ — импорт через CDN:

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

После этого можно проверять доступность объекта workbox:

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

Важно понимать, что workbox-sw работает исключительно в контексте сервис-воркера, поэтому любые вызовы должны происходить внутри файла сервис-воркера (service-worker.js).

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

Workbox предоставляет удобные стратегии кеширования через модуль workbox-routing и workbox-strategies. Основные стратегии:

  • CacheFirst — сначала проверяет кеш, если ресурс найден — отдаёт его, иначе делает сетевой запрос.
  • NetworkFirst — сначала делает сетевой запрос, при неудаче отдаёт ресурс из кеша.
  • StaleWhileRevalidate — отдаёт кешированную версию и параллельно обновляет её в фоне.

Пример кеширования CSS и JS файлов с использованием CacheFirst:

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

Здесь ключевой момент — использование плагина ExpirationPlugin, который ограничивает количество кешированных ресурсов и срок их хранения.

Динамическое кеширование API-запросов

Для REST API чаще применяется стратегия NetworkFirst с запасным кешем:

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

Особенность такой конфигурации — быстрый ответ при доступной сети и использование кеша при проблемах с соединением. Параметр networkTimeoutSeconds позволяет контролировать максимальное время ожидания ответа.

Превью-загрузка страниц (Precache)

Workbox поддерживает предзагрузку файлов через workbox-precaching. Это позволяет сразу кешировать критические ресурсы при установке сервис-воркера:

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

revision используется для контроля версий файлов — при изменении ресурса Workbox обновит его в кеше. Этот подход идеально подходит для статических SPA-ресурсов.

Тестирование кеширования и стратегий

Для проверки корректности работы workbox-sw полезно использовать Chrome DevTools:

  1. Вкладка Application → Service Workers — проверка регистрации и активации воркера.
  2. Вкладка Network — симулировать offline-режим и проверять отдачу ресурсов из кеша.
  3. Вкладка Application → Cache Storage — убедиться, что ресурсы кешируются по заданным правилам.

Также Workbox предоставляет API для отладки:

workbox.setConfig({debug: true});

Включение режима debug выводит в консоль подробные логи о регистрации маршрутов и кешировании.

Интеграция с Unit-тестами

Для тестирования логики сервис-воркера и работы кешей можно использовать фреймворки вроде Jest с пакетом workbox-window:

import {Workbox} from 'workbox-window';

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

wb.addEventListener('activated', event => {
  console.log('Service worker активирован', event.isUpdate);
});

wb.register();

Тесты можно строить на проверке событий (activated, waiting) и имитации offline-режима через jest-fetch-mock для проверки стратегий кеширования.

Расширенные плагины

Workbox предоставляет мощные плагины для управления кешами:

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

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

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

Такой подход обеспечивает надежное кеширование изображений с контролем объема и проверки валидности ответа.

Настройка стратегии обновления

Workbox позволяет настраивать стратегию обновления ресурсов для SPA:

workbox.routing.registerRoute(
  ({request}) => request.mode === 'navigate',
  new workbox.strategies.NetworkFirst({
    cacheName: 'html-cache',
    plugins: [
      new workbox.expiration.ExpirationPlugin({maxEntries: 10})
    ],
  })
);

Использование NetworkFirst для HTML обеспечивает, что пользователи видят актуальные версии страниц, но при отсутствии сети сервис-воркер отдаст кешированную версию.

Оглавление