Написание собственного плагина

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

Структура плагина

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

  • cacheWillUpdate({request, response, event, state}) – вызывается перед сохранением ответа в кэш. Позволяет фильтровать или модифицировать ответ.
  • cacheDidUpdate({cacheName, request, oldResponse, newResponse, event, state}) – вызывается после обновления кэша. Используется для уведомлений или логирования.
  • cachedResponseWillBeUsed({cacheName, request, cachedResponse, matchOptions, event, state}) – позволяет изменить или отклонить кэшированный ответ перед отдачей его клиенту.
  • requestWillFetch({request, event, state}) – вызывается перед отправкой запроса на сеть. Можно модифицировать запрос или добавить дополнительные заголовки.
  • fetchDidSucceed({request, response, event, state}) – вызывается при успешном получении ответа с сети.
  • fetchDidFail({request, error, event, state}) – вызывается при ошибке запроса к сети.

Каждый из этих методов должен возвращать значение, соответствующее его роли, или Promise с результатом.

Пример создания простого плагина

const myPlugin = {
  cacheWillUpdate: async ({request, response}) => {
    if (!response || !response.ok) {
      return null;
    }
    return response;
  },
  cachedResponseWillBeUsed: async ({cachedResponse}) => {
    if (!cachedResponse) {
      return null;
    }
    return cachedResponse;
  },
  fetchDidFail: async ({request, error}) => {
    console.error(`Не удалось получить ресурс: ${request.url}`, error);
  }
};

В этом примере:

  • cacheWillUpdate отклоняет ответы с ошибкой (status >= 400).
  • cachedResponseWillBeUsed возвращает кэшированный ответ, если он существует, иначе – null.
  • fetchDidFail логирует ошибки при сетевых запросах.

Интеграция плагина в стратегию Workbox

Плагины можно подключать к стратегиям кэширования Workbox через свойство plugins:

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

registerRoute(
  ({request}) => request.destination === 'image',
  new StaleWhileRevalidate({
    cacheName: 'images-cache',
    plugins: [myPlugin]
  })
);

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

Особенности работы методов

  • cacheWillUpdate: метод должен возвращать объект Response для добавления в кэш или null, чтобы пропустить кэширование. Например, можно исключать из кэша HTML-страницы с кодом ошибки.
  • cachedResponseWillBeUsed: полезен для проверки срока годности кэшированного ответа или добавления кастомных заголовков перед отдачей клиенту.
  • requestWillFetch: позволяет внедрять аутентификацию или динамически изменять параметры запросов.
  • fetchDidSucceed / fetchDidFail: дают возможность централизованного логирования, триггеров уведомлений или аналитики при сетевых событиях.

Советы по созданию плагинов

  • Каждый метод должен быть максимально узко специализирован, чтобы легко комбинироваться с другими плагинами.
  • Методы могут быть асинхронными, поэтому важно корректно обрабатывать Promise и ошибки.
  • Не стоит дублировать стандартные проверки Workbox; лучше фокусироваться на уникальной логике приложения.
  • Плагины можно многократно использовать в разных стратегиях, что повышает повторное использование кода.

Расширенные сценарии

  1. Автоматическое логирование устаревших ресурсов: с помощью cacheDidUpdate можно фиксировать версии файлов и отправлять данные на сервер.
  2. Управление пользовательскими заголовками: requestWillFetch позволяет добавлять токены или метки сессий для всех сетевых запросов.
  3. Кастомная очистка кэша: используя комбинацию cacheWillUpdate и cacheDidUpdate, можно реализовать правила удаления старых или неактуальных ресурсов.

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

Оглавление