Параметры настройки стратегий

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

Типы стратегий

Workbox включает несколько встроенных стратегий, каждая из которых реализует конкретный алгоритм обработки запросов:

  1. NetworkFirst Пытается сначала получить ресурс с сети. Если сеть недоступна, возвращается закешированная версия. Полезна для динамического контента, который часто обновляется.

  2. CacheFirst Сначала проверяет кэш, а только при его отсутствии — обращается к сети. Подходит для статических ресурсов, таких как изображения, шрифты, иконки.

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

  4. NetworkOnly и CacheOnly Стратегии для случаев, когда необходимо полностью полагаться на сеть или только на кэш.

Основные параметры конфигурации

Каждая стратегия в Workbox может быть настроена с использованием объекта конфигурации. Основные параметры:

  • cacheName Определяет имя кэша, в котором будут храниться ресурсы. Полезно при разделении кэшей для разных типов контента.

    new workbox.strategies.CacheFirst({
  cacheName: 'images-cache',
});

  • plugins Массив плагинов, позволяющих расширить функциональность стратегии:

    • ExpirationPlugin — управление сроком жизни и количеством элементов кэша.
    • CacheableResponsePlugin — фильтрация кэшируемых ответов по статусу или заголовкам.
    new workbox.strategies.NetworkFirst({
  cacheName: 'api-cache',
  plugins: [
    new workbox.expiration.ExpirationPlugin({
      maxEntries: 50,
      maxAgeSeconds: 24 * 60 * 60, // 1 день
    }),
  ],
});

  • fetchOptions Позволяет передавать дополнительные опции в fetch, например credentials или mode.

    new workbox.strategies.NetworkFirst({
  fetchOptions: {
    credentials: 'include',
  },
});

  • matchOptions Настройки для поиска ресурсов в кэше (Cache.match). С помощью этих параметров можно учитывать или игнорировать поисковые параметры URL, методы запроса и т.д.

    new workbox.strategies.CacheFirst({
  matchOptions: {
    ignoreSearch: true,
  },
});

Плагины стратегий

Workbox поддерживает систему плагинов, расширяющих стандартное поведение кэширования:

  • ExpirationPlugin Контролирует количество и возраст кэшируемых элементов:

    • maxEntries — максимальное число элементов в кэше.
    • maxAgeSeconds — максимальное время хранения.

  • CacheableResponsePlugin Позволяет кэшировать только определённые ответы, например с кодом 200:

    new workbox.strategies.CacheFirst({
  plugins: [
    new workbox.cacheableResponse.CacheableResponsePlugin({
      statuses: [0, 200],
    }),
  ],
});

  • BroadcastUpdatePlugin Сообщает клиенту о том, что ресурс в кэше был обновлён, что удобно для синхронизации данных.

  • BackgroundSyncPlugin Позволяет повторять сетевые запросы при восстановлении соединения, полезно для офлайн-режима.

Особенности конфигурации

  • Приоритет кэша и сети Параметры стратегии определяют, какой источник является приоритетным. Для динамических API чаще выбирается NetworkFirst, для статических ресурсов — CacheFirst.

  • Срок жизни кэша и количество элементов Оптимизация размера кэша предотвращает переполнение и обеспечивает актуальность данных.

  • Обработка ошибок сети Стратегии могут быть расширены плагинами для управления ошибками, повторной попыткой или fallback-ресурсами.

  • Игнорирование query-параметров Иногда требуется кэшировать URL без учёта поисковых параметров, чтобы разные варианты одного ресурса не создавали дублирующие записи.

Пример комплексной настройки

import {registerRoute} from 'workbox-routing';
import {CacheFirst, NetworkFirst} from 'workbox-strategies';
import {ExpirationPlugin, CacheableResponsePlugin} from 'workbox-plugins';

// Кэширование изображений
registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'images-cache',
    plugins: [
      new ExpirationPlugin({ maxEntries: 100, maxAgeSeconds: 7 * 24 * 60 * 60 }),
      new CacheableResponsePlugin({ statuses: [0, 200] })
    ]
  })
);

// Кэширование API-запросов
registerRoute(
  ({url}) => url.pathname.startsWith('/api/'),
  new NetworkFirst({
    cacheName: 'api-cache',
    plugins: [
      new ExpirationPlugin({ maxEntries: 50, maxAgeSeconds: 24 * 60 * 60 }),
    ],
    fetchOptions: { credentials: 'include' }
  })
);

В этом примере продемонстрированы две стратегии с разной конфигурацией: для изображений используется быстрый доступ из кэша, а для API — приоритет сети с кэшированием на случай офлайн-доступа. Плагины обеспечивают контроль за сроком хранения и фильтрацию кэшируемых ответов.

Оглавление