Обзор инструментов генерации сервис-воркера

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

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

  • workbox-core — содержит базовые функции для регистрации и настройки сервис-воркеров, работу с событиями install, activate, fetch.
  • workbox-routing — отвечает за маршрутизацию запросов и связывает URL-шаблоны с конкретными стратегиями кэширования.
  • workbox-strategies — реализует различные стратегии кэширования и сетевого запроса, включая NetworkFirst, CacheFirst, StaleWhileRevalidate, NetworkOnly, CacheOnly.
  • workbox-precaching — упрощает предварительное кэширование статических ресурсов с управлением версиями и обновлениями.
  • workbox-expiration — предоставляет возможности для автоматического удаления устаревших кэшированных файлов.
  • workbox-background-sync — позволяет обрабатывать запросы в фоне, если сеть недоступна, и повторять их при восстановлении соединения.
  • workbox-google-analytics — автоматически кэширует запросы к Google Analytics и обеспечивает их отправку в офлайн-режиме.

Инструменты генерации сервис-воркеров

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

1. Workbox CLI

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

  • Автогенерация манифеста ресурсов для предварительного кэширования.
  • Настройка стратегии кэширования через конфигурационный файл workbox-config.js.
  • Генерация полностью готового сервис-воркера на основе шаблона.

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

module.exports = {
  globDirectory: 'dist/',
  globPatterns: [
    '**/*.{html,js,css,png,jpg,svg}'
  ],
  swDest: 'dist/sw.js',
  runtimeCaching: [{
    urlPattern: /\.(?:png|jpg|jpeg|svg)$/,
    handler: 'CacheFirst',
    options: {
      cacheName: 'images',
      expiration: {
        maxEntries: 50,
        maxAgeSeconds: 30 * 24 * 60 * 60,
      },
    },
  }],
};

В этом примере все ресурсы из dist/ автоматически попадают в кэш при установке сервис-воркера. Для изображений применяется стратегия CacheFirst с ограничением на количество и возраст кэшированных файлов.

2. Workbox Webpack Plugin

Workbox Webpack Plugin интегрируется с процессом сборки Webpack. Позволяет динамически генерировать сервис-воркер на основе ресурсов проекта:

  • GenerateSW — полностью генерирует сервис-воркер и манифест.
  • InjectManifest — позволяет разработчику создать кастомный сервис-воркер с использованием Workbox, а плагин добавляет список ресурсов для предварительного кэширования.

Пример использования GenerateSW:

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

module.exports = {
  plugins: [
    new GenerateSW({
      clientsClaim: true,
      skipWaiting: true,
      runtimeCaching: [
        {
          urlPattern: /^https:\/\/example\.com\/api\//,
          handler: 'NetworkFirst',
          options: {
            cacheName: 'api-cache',
            expiration: { maxEntries: 30, maxAgeSeconds: 5 * 60 },
          },
        },
      ],
    }),
  ],
};

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

3. Workbox Build

Workbox Build — это Node.js API, предоставляющее гибкость для генерации сервис-воркеров вне сборщиков вроде Webpack. Основные функции:

  • Создание сервис-воркера через injectManifest() или generateSW().
  • Настройка стратегий кэширования и правил маршрутизации через объект конфигурации.
  • Генерация манифеста с хэшированием ресурсов для эффективного обновления.

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

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

generateSW({
  globDirectory: 'public/',
  globPatterns: ['**/*.{html,js,css,png}'],
  swDest: 'public/sw.js',
  clientsClaim: true,
  skipWaiting: true,
}).then(({ count, size }) => {
  console.log(`Сервис-воркер сгенерирован для ${count} файлов, общий размер: ${size} байт`);
});

Этот подход особенно полезен для проектов без Webpack или с нестандартной структурой сборки.

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

Workbox поддерживает гибкие стратегии кэширования, каждая из которых имеет свои особенности:

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

Выбор стратегии зависит от типа ресурса: статические файлы лучше кэшировать с CacheFirst, а динамические API-запросы — через NetworkFirst или StaleWhileRevalidate.

Управление версиями и очистка кэша

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

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

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

import { ExpirationPlugin } from 'workbox-expiration';
import { CacheFirst } from 'workbox-strategies';
import { registerRoute } from 'workbox-routing';

registerRoute(
  /\.(?:png|jpg|jpeg|svg)$/,
  new CacheFirst({
    cacheName: 'images-cache',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 60,
        maxAgeSeconds: 30 * 24 * 60 * 60,
      }),
    ],
  })
);

Таким образом, кэш остаётся актуальным, а устаревшие данные автоматически удаляются без вмешательства разработчика.

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

Оглавление