Интеграция с Rollup

Установка и настройка

Для интеграции Workbox с Rollup необходимо использовать пакет rollup-plugin-workbox. Установка производится через npm:

npm install workbox-build rollup-plugin-workbox --save-dev

Пакет workbox-build обеспечивает API для генерации сервис-воркеров и манифестов предзагрузки, а плагин для Rollup позволяет автоматизировать этот процесс в процессе сборки.

В конфигурации Rollup подключение выглядит следующим образом:

import workbox from 'rollup-plugin-workbox';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    workbox({
      mode: 'generateSW',
      options: {
        swDest: 'dist/sw.js',
        globDirectory: 'dist',
        globPatterns: ['**/*.{js,css,html,png,jpg}'],
        skipWaiting: true,
        clientsClaim: true
      }
    })
  ]
};

Ключевые параметры:

  • mode: 'generateSW' — использование автоматической генерации сервис-воркера.
  • swDest — путь к итоговому файлу сервис-воркера.
  • globDirectory и globPatterns — директория и маски файлов для предзагрузки.
  • skipWaiting и clientsClaim — позволяют обновлять сервис-воркер без перезагрузки страницы.

Генерация манифеста предзагрузки

Workbox позволяет формировать манифест ресурсов (precache manifest), который содержит все файлы, подлежащие кэшированию. В Rollup это настраивается через globPatterns и globDirectory.

Пример расширенной конфигурации:

workbox({
  mode: 'generateSW',
  options: {
    swDest: 'dist/sw.js',
    globDirectory: 'dist',
    globPatterns: [
      '**/*.html',
      '**/*.js',
      '**/*.css',
      'images/**/*.{png,jpg,svg}'
    ],
    runtimeCaching: [
      {
        urlPattern: /\.(?:png|jpg|jpeg|svg)$/,
        handler: 'CacheFirst',
        options: {
          cacheName: 'images-cache',
          expiration: {
            maxEntries: 50,
            maxAgeSeconds: 30 * 24 * 60 * 60 // 30 дней
          }
        }
      },
      {
        urlPattern: /^https:\/\/api\.example\.com\/.*$/,
        handler: 'NetworkFirst',
        options: {
          cacheName: 'api-cache',
          networkTimeoutSeconds: 5
        }
      }
    ],
    skipWaiting: true,
    clientsClaim: true
  }
})

Особенности:

  • runtimeCaching позволяет создавать стратегии кэширования для динамических запросов.
  • CacheFirst и NetworkFirst — основные стратегии, используемые для медиа-файлов и API.
  • Настройка expiration ограничивает размер и срок хранения кэша.

Интеграция с модульной системой Rollup

Если проект использует ES-модули, сервис-воркер может импортировать отдельные скрипты:

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

precacheAndRoute(self.__WB_MANIFEST);

registerRoute(
  ({request}) => request.destination === 'script',
  new StaleWhileRevalidate()
);

В этом случае Rollup необходимо правильно обрабатывать импортируемые модули и указывать их в globPatterns, чтобы они включались в предзагрузку.

Оптимизация сборки

Для уменьшения размера кэша и ускорения работы приложения:

  1. Фильтрация файлов: исключение карт исходников, тестовых файлов и неиспользуемых ассетов.

    globPatterns: ['**/*.js', '**/*.css', '**/*.html'],
globIgnores: ['**/*.map', 'test/**']

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

  3. Версионирование сервис-воркера: добавление хэша к имени файла позволяет корректно обновлять кешированные ресурсы.

swDest: `dist/sw.${Date.now()}.js`

Интеграция с Rollup в CI/CD

Автоматическая генерация сервис-воркера при сборке в CI/CD выполняется через команду Rollup:

rollup -c

Важно убедиться, что dist папка очищается перед сборкой, чтобы старые кэшированные ресурсы не оставались:

import del from 'rollup-plugin-delete';

plugins: [
  del({ targets: 'dist/*' }),
  workbox({ ... })
]

Обработка ошибок и логирование

rollup-plugin-workbox предоставляет встроенное логирование ошибок генерации сервис-воркера. Для отладки можно использовать параметр mode: 'injectManifest', который позволяет сначала подготовить кастомный сервис-воркер, а затем автоматически вставлять в него список предзагружаемых файлов:

workbox({
  mode: 'injectManifest',
  options: {
    swSrc: 'src/sw-template.js',
    swDest: 'dist/sw.js',
    globDirectory: 'dist',
    globPatterns: ['**/*.{js,css,html,png,jpg}']
  }
})

Это удобно для сложных стратегий кэширования и динамических импортов.

Оглавление