Архитектура плагинов

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

Основные концепции плагинов

Плагин в Workbox — это объект, содержащий один или несколько хуков (hooks), которые вызываются в определённые моменты жизненного цикла запроса. Плагины позволяют:

  • Модифицировать или фильтровать запросы и ответы;
  • Управлять ошибками сети или кэша;
  • Вести статистику и логику обновления кэша;
  • Расширять стратегии с минимальными изменениями кода.

Каждый плагин может быть использован в любой стратегии Workbox, включая CacheFirst, NetworkFirst, StaleWhileRevalidate и другие.

Жизненный цикл плагина

Хуки плагина привязаны к конкретным событиям:

  1. requestWillFetch Вызывается перед отправкой сетевого запроса. Позволяет изменить объект Request или добавить дополнительные заголовки.

    const plugin = {
  requestWillFetch: async ({request}) => {
    const modifiedHeaders = new Headers(request.headers);
    modifiedHeaders.set('X-Custom-Header', 'Workbox');
    return new Request(request, { headers: modifiedHeaders });
  }
};

  2. fetchDidSucceed Срабатывает после успешного получения ответа от сети. Часто используется для логирования или проверки состояния ответа перед сохранением в кэш.

    const plugin = {
  fetchDidSucceed: async ({request, response}) => {
    console.log(`Успешный запрос: ${request.url}`);
    return response;
  }
};

  3. fetchDidFail Вызывается при неудачной попытке получения ресурса из сети. Позволяет реализовать альтернативные стратегии, например, fallback к кэшу.

    const plugin = {
  fetchDidFail: async ({request}) => {
    console.warn(`Сбой сети для запроса: ${request.url}`);
  }
};

  4. cacheWillUpdate Определяет, можно ли кэшировать полученный ответ. Используется для фильтрации ответов по статусу или типу содержимого.

    const plugin = {
  cacheWillUpdate: async ({request, response}) => {
    if (response.status === 200 && response.type === 'basic') {
      return response;
    }
    return null;
  }
};

  5. cacheDidUpdate Вызывается после обновления кэша. Полезен для ведения статистики или триггера событий о новых версиях ресурсов.

    const plugin = {
  cacheDidUpdate: async ({cacheName, request, oldResponse, newResponse}) => {
    console.log(`Обновлён кэш ${cacheName} для ${request.url}`);
  }
};

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

    const plugin = {
  cachedResponseWillBeUsed: async ({cacheName, cachedResponse}) => {
    if (!cachedResponse) return null;
    return cachedResponse;
  }
};

Комбинирование плагинов

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

const strategy = new workbox.strategies.NetworkFirst({
  cacheName: 'dynamic-cache',
  plugins: [pluginA, pluginB]
});

Важным аспектом является порядок подключения плагинов, так как он определяет последовательность вызова хуков. Например, если один плагин модифицирует запрос, все последующие плагины получат уже изменённый объект Request.

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

Процесс создания собственного плагина сводится к реализации одного или нескольких хуков. Структура плагина проста:

class CustomPlugin {
  async requestWillFetch({request}) {
    // Модификация запроса
    return request;
  }

  async fetchDidSucceed({response}) {
    // Логика после успешного запроса
    return response;
  }

  async cacheWillUpdate({response}) {
    // Определение, можно ли кэшировать
    return response.status === 200 ? response : null;
  }
}

Такой плагин можно подключить к любой стратегии Workbox через массив plugins.

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

Workbox поставляется с рядом встроенных плагинов, обеспечивающих распространённые задачи:

  • ExpirationPlugin – управляет временем жизни и количеством ресурсов в кэше;
  • CacheableResponsePlugin – позволяет кэшировать только ответы с определёнными HTTP-статусами или заголовками;
  • BroadcastUpdatePlugin – уведомляет клиентов о новых версиях кэшированных ресурсов.

Эти плагины можно комбинировать с кастомными для гибкой настройки поведения сервис-воркера.

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

  • Использовать плагины для разделения логики и повторного использования кода между стратегиями.
  • Проверять последовательность хуков при подключении нескольких плагинов.
  • Для ресурсоёмких операций использовать асинхронные методы и минимизировать задержки на критическом пути запроса.

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

Оглавление