workbox-build: режим generateSW

workbox-build предоставляет инструменты для автоматизации создания сервис-воркеров с использованием преднастроенных стратегий кэширования. Одним из ключевых режимов является generateSW, который позволяет генерировать полный сервис-воркер на основе конфигурации без необходимости писать его вручную. Этот режим особенно удобен для проектов, где требуется быстрое подключение PWA-функционала с минимальными усилиями.

Настройка generateSW

Для начала работы используется функция generateSW из пакета workbox-build:

const { generateSW } = require('workbox-build');

Эта функция принимает объект конфигурации, в котором указываются параметры генерации сервис-воркера.

Основные параметры:

  • swDest — путь к файлу, который будет создан (например, 'dist/sw.js').
  • globDirectory — корневая директория, откуда будет происходить поиск файлов для кэширования.
  • globPatterns — массив паттернов файлов, которые необходимо включить в кэш.
  • globIgnores — массив паттернов файлов, которые необходимо исключить.
  • maximumFileSizeToCacheInBytes — максимальный размер файла, который можно кэшировать.
  • clientsClaim — автоматически активирует сервис-воркер для всех открытых клиентов.
  • skipWaiting — позволяет воркеру сразу переходить в активное состояние при обновлении.

Пример базовой конфигурации:

generateSW({
  swDest: 'dist/sw.js',
  globDirectory: 'dist',
  globPatterns: [
    '**/*.{html,js,css,png,jpg,svg}'
  ],
  globIgnores: [
    'sw.js',
    'admin/**'
  ],
  clientsClaim: true,
  skipWaiting: true,
  maximumFileSizeToCacheInBytes: 5 * 1024 * 1024, // 5 MB
}).then(({ count, size }) => {
  console.log(`Сервис-воркер сгенерирован. Закэшировано ${count} файлов, общий размер ${size} байт.`);
});

Стратегии кэширования в generateSW

В режиме generateSW можно настроить стратегии кэширования с помощью поля runtimeCaching. Оно позволяет определить, как сервис-воркер будет обрабатывать сетевые запросы, которые не входят в список заранее кэшированных файлов.

Пример конфигурации runtimeCaching:

runtimeCaching: [
  {
    urlPattern: /^https:\/\/api\.example\.com\/.*$/,
    handler: 'NetworkFirst',
    options: {
      cacheName: 'api-cache',
      expiration: {
        maxEntries: 50,
        maxAgeSeconds: 24 * 60 * 60 // 1 день
      },
      networkTimeoutSeconds: 3
    }
  },
  {
    urlPattern: /\.(?:png|jpg|jpeg|svg|gif)$/,
    handler: 'CacheFirst',
    options: {
      cacheName: 'image-cache',
      expiration: {
        maxEntries: 100,
        maxAgeSeconds: 7 * 24 * 60 * 60 // 7 дней
      }
    }
  }
]

Описание ключевых стратегий:

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

Интеграция с билдером

generateSW отлично интегрируется с сборщиками вроде Webpack, Rollup или Parcel. Для Webpack можно использовать workbox-webpack-plugin, который внутри себя использует generateSW.

Пример подключения к Webpack:

const { GenerateSW } = require('workbox-webpack-plugin');

module.exports = {
  // Остальная конфигурация Webpack
  plugins: [
    new GenerateSW({
      clientsClaim: true,
      skipWaiting: true,
      maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
      runtimeCaching: [
        {
          urlPattern: /^https:\/\/cdn\.example\.com\/.*$/,
          handler: 'CacheFirst',
          options: {
            cacheName: 'cdn-cache',
            expiration: {
              maxEntries: 50,
              maxAgeSeconds: 7 * 24 * 60 * 60
            }
          }
        }
      ]
    })
  ]
};

Отладка и анализ

После генерации сервис-воркера важно убедиться, что он работает корректно. Для этого:

  1. Проверяется кэширование статических ресурсов через DevTools → Application → Cache Storage.
  2. Используется workbox-build метод injectManifest для случаев, когда требуется комбинировать кастомный код воркера с автоматическим кэшированием.
  3. Можно включить логирование через workbox-build:
generateSW({
  swDest: 'dist/sw.js',
  globDirectory: 'dist',
  globPatterns: ['**/*.{html,js,css}'],
  mode: 'development', // выводит отладочные сообщения
  clientsClaim: true,
  skipWaiting: true
});

Оптимизация кэширования

  • Исключение больших файлов: ограничение через maximumFileSizeToCacheInBytes.
  • Группировка ресурсов по кэшу: разделение CSS, JS, изображений, API-запросов на отдельные кэши.
  • Использование стратегий для разных типов данных: критически важные данные через NetworkFirst, редко изменяющиеся ресурсы через CacheFirst.
  • Проверка обновлений: при публикации новой версии сайта skipWaiting и clientsClaim позволяют пользователям получать актуальные файлы без необходимости ручного обновления.
Оглавление