Конфигурационный файл workbox-config.js

Конфигурационный файл workbox-config.js является центральным элементом при работе с Workbox CLI. Он используется для управления процессом генерации сервис-воркера и кеширования ресурсов, позволяя настроить точное поведение PWA.

Основная структура файла

Файл представляет собой объект JavaScript, который экспортируется через module.exports. Основные ключи объекта:

module.exports = {
  globDirectory: 'build/',
  globPatterns: [
    '**/*.{html,js,css,png,jpg,svg}'
  ],
  swDest: 'build/service-worker.js',
  runtimeCaching: []
};
  • globDirectory — корневая директория, в которой Workbox будет искать файлы для кеширования. Обычно указывается папка сборки проекта, например build/ или dist/.
  • globPatterns — массив шаблонов файлов для предварительного кеширования (precache). Можно использовать маски *, ** для поддиректорий и перечислять конкретные расширения файлов.
  • swDest — путь и имя создаваемого сервис-воркера.
  • runtimeCaching — массив объектов, описывающих стратегию кеширования для ресурсов, которые подгружаются динамически во время работы приложения.

Предварительное кеширование (Precache)

Предварительное кеширование позволяет заранее добавить важные ресурсы в кэш, чтобы они были доступны оффлайн. Каждый элемент файла, совпадающий с шаблонами globPatterns, добавляется в precacheManifest автоматически.

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

module.exports = {
  globDirectory: 'dist/',
  globPatterns: [
    '**/*.{html,js,css,png,jpg,svg,json}'
  ],
  swDest: 'dist/service-worker.js',
  maximumFileSizeToCacheInBytes: 5 * 1024 * 1024 // ограничение размера файла 5 МБ
};

Ключ maximumFileSizeToCacheInBytes позволяет ограничить размер файлов, которые будут добавлены в кеш. Это полезно для предотвращения кеширования больших мультимедийных файлов, которые могут замедлить загрузку приложения.

Динамическое кеширование (Runtime Caching)

Для ресурсов, которые не известны на этапе сборки (например, API-запросы), используется runtime caching. Каждый элемент описывается объектом с параметрами:

  • urlPattern — регулярное выражение или строка, соответствующая URL ресурса.
  • handler — стратегия кеширования: CacheFirst, NetworkFirst, StaleWhileRevalidate.
  • options — дополнительные настройки, такие как имя кэша, лимиты количества и срока хранения.

Пример:

runtimeCaching: [
  {
    urlPattern: /^https:\/\/api\.example\.com\/data/,
    handler: 'NetworkFirst',
    options: {
      cacheName: 'api-cache',
      expiration: {
        maxEntries: 50,
        maxAgeSeconds: 24 * 60 * 60
      }
    }
  },
  {
    urlPattern: /\.(?:png|jpg|jpeg|svg)$/,
    handler: 'CacheFirst',
    options: {
      cacheName: 'images-cache',
      expiration: {
        maxEntries: 100,
        maxAgeSeconds: 7 * 24 * 60 * 60
      }
    }
  }
]

Полезные опции options

  1. cacheName — имя кэша, позволяет разделять разные типы ресурсов.
  2. expiration — настройки ограничения кэша: maxEntries и maxAgeSeconds.
  3. backgroundSync — можно настроить очередь для повторной отправки запросов при восстановлении сети.
  4. fetchOptions — параметры, передаваемые в fetch(), например credentials или mode.
  5. matchOptions — дополнительные параметры для сопоставления запроса с кэшированными элементами.

Примеры шаблонов URL

  • Кеширование всех скриптов и стилей:
urlPattern: /\.(?:js|css)$/
  • Кеширование только конкретного поддомена API:
urlPattern: /^https:\/\/api\.example\.com\/v1\//
  • Кеширование всех изображений:
urlPattern: /\.(?:png|jpg|jpeg|gif|svg)$/

Интеграция с Workbox CLI

Для генерации сервис-воркера используется команда:

workbox generateSW workbox-config.js

CLI прочитает настройки из файла, выполнит предварительное кеширование, создаст service-worker.js и подготовит необходимые манифесты.

Советы по оптимизации

  • Разделять кеши для разных типов ресурсов, чтобы обновление одних не инвалидировало другие.
  • Ограничивать размер кеша и срок хранения для больших данных.
  • Использовать StaleWhileRevalidate для изображений и статических ресурсов, чтобы ускорить загрузку при одновременном обновлении кэша.
  • Проверять urlPattern на точность регулярного выражения, чтобы не кешировать лишние ресурсы.

Файл workbox-config.js является мощным инструментом для детальной настройки поведения PWA, позволяя комбинировать стратегию кеширования, оптимизировать работу сервис-воркера и обеспечивать стабильную работу приложения в оффлайн-режиме.

Оглавление