Класс Strategy и его интерфейс

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

Архитектура Strategy

Класс Strategy реализует интерфейс с основными методами:

  • handle({request, event, params}) — основной метод, который вызывается при поступлении запроса через сервис-воркер. Он управляет порядком выполнения сетевых и кешевых операций и возвращает объект Response.
  • fetch(request, handler) — метод, выполняющий сетевой запрос. Может использоваться для переопределения стандартного способа получения ресурсов.
  • cacheKeyWillBeUsed({request, mode, params}) — позволяет модифицировать ключ кеша перед записью или чтением ресурса, что полезно для реализации версионирования или сложных схем кеширования.
  • cacheDidUpdate({cacheName, oldResponse, newResponse, request}) — хук, вызываемый после обновления кеша. Позволяет выполнять дополнительные действия, например, синхронизацию данных с сервером или логирование изменений.

Встроенные стратегии Workbox

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

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

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

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

  4. NetworkOnly Полностью полагается на сеть, кеширование не применяется. Используется для запросов, которые не требуют локального хранения.

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

Настройка стратегии

Создание экземпляра стратегии производится через конструктор:

import { CacheFirst } from 'workbox-strategies';

const cacheFirstStrategy = new CacheFirst({
  cacheName: 'my-cache',
  plugins: [
    {
      cacheWillUpdate: async ({response}) => {
        if (response.status === 200) return response;
        return null;
      }
    }
  ]
});

Ключевые параметры конструктора:

  • cacheName — имя кеша, используемого стратегией. Позволяет разделять данные по категориям.
  • plugins — массив плагинов, расширяющих функциональность стратегии (например, логирование, управление сроком хранения, модификация ответа).
  • fetchOptions — дополнительные настройки для сетевого запроса, такие как credentials или mode.
  • matchOptions — настройки при поиске ресурсов в кеше, например, ignoreSearch для игнорирования query-параметров.

Взаимодействие с Route

Стратегия напрямую используется вместе с классом Route, который связывает URL или регулярное выражение с определённой логикой обработки запросов:

import { registerRoute } from 'workbox-routing';
import { NetworkFirst } from 'workbox-strategies';

registerRoute(
  ({url}) => url.pathname.startsWith('/api/'),
  new NetworkFirst({
    cacheName: 'api-cache',
    networkTimeoutSeconds: 5
  })
);

В этом примере NetworkFirst управляет кешированием API-запросов, возвращая ответ из сети, но при таймауте или недоступности сети отдаёт кешированный результат.

Плагины и расширение функциональности

Интерфейс Strategy тесно интегрирован с системой плагинов Workbox. Основные хуки:

  • requestWillFetch — изменение запроса перед отправкой в сеть.
  • cacheKeyWillBeUsed — формирование ключа для кеша.
  • cacheDidUpdate — действия после обновления кеша.
  • fetchDidSucceed / fetchDidFail — обработка успешного или неудачного сетевого запроса.
  • cachedResponseWillBeUsed — контроль возвращаемого из кеша ответа.

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

Кастомные стратегии

Можно создавать собственные стратегии, наследуя класс Strategy и переопределяя метод handle:

import { Strategy } from 'workbox-strategies';

class CustomStrategy extends Strategy {
  async handle({request, event}) {
    try {
      const response = await fetch(request);
      return response;
    } catch (error) {
      const cache = await caches.open('fallback-cache');
      return await cache.match('/offline.html');
    }
  }
}

Такой подход позволяет гибко управлять логикой обработки запросов, объединяя кеширование, обработку ошибок и сложные правила обновления ресурсов.

Практические рекомендации

  • Для ресурсов с высокой динамикой лучше использовать NetworkFirst или StaleWhileRevalidate.
  • Для статических ассетов, которые редко меняются — CacheFirst.
  • Ключ кеша должен быть уникальным и отражать назначение данных, особенно при обновлениях.
  • Плагины позволяют внедрять дополнительные проверки и фильтры, улучшая контроль над кешем и сетью.

Класс Strategy — центральный элемент Workbox, предоставляющий мощный и гибкий интерфейс для реализации любой схемы кеширования и сетевого взаимодействия в сервис-воркере.

Оглавление