Плагин CacheableResponsePlugin

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

Основные свойства

Плагин принимает объект конфигурации с двумя ключевыми параметрами:

  1. statuses – массив чисел HTTP-статусов, которые разрешены для кэширования. Пример: [0, 200]

    • 0 используется для opaque-ответов (например, кросс-доменные запросы без CORS).
    • 200 – стандартный успешный ответ.

  2. headers – объект с ключами-заголовками и массивом допустимых значений. Пример:

    headers: {
  'Content-Type': ['image/png', 'image/jpeg']
}

    Позволяет кэшировать только те ответы, которые соответствуют конкретным заголовкам.

Подключение и использование

Плагин применяется в стратегии кэширования через Workbox:

import { registerRoute } from 'workbox-routing';
import { CacheFirst } from 'workbox-strategies';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';

registerRoute(
  ({ request }) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'images-cache',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
        headers: {
          'Content-Type': ['image/png', 'image/jpeg']
        }
      })
    ]
  })
);

В данном примере стратегия CacheFirst сначала пытается отдать ресурс из кэша, а если его нет, загружает с сети. Плагин CacheableResponsePlugin гарантирует, что в кэш попадут только корректные ответы с статусом 0 или 200 и с разрешёнными типами изображений.

Поведение с различными статусами

  • 0: opaque-ответы (часто встречаются при кросс-доменных запросах без CORS).
  • 200: стандартный успешный HTTP-ответ.
  • 4xx и 5xx: по умолчанию не кэшируются, если явно не указаны в массиве statuses.
  • 302, 301: редиректы не кэшируются, что предотвращает неправильное сохранение промежуточных ответов.

Пример кэширования только успешных ответов:

new CacheableResponsePlugin({
  statuses: [200]
});

Использование с NetworkFirst и StaleWhileRevalidate

Плагин совместим с любыми стратегиями Workbox. Он полезен для контроля кэша на этапе записи:

  • NetworkFirst: запрос с сети, fallback к кэшу. Плагин предотвращает кэширование ошибок сети.
  • StaleWhileRevalidate: отдача устаревшего кэша, параллельная загрузка обновлённого ответа. Плагин обеспечивает попадание в кэш только проверенных ответов.
import { StaleWhileRevalidate } from 'workbox-strategies';

registerRoute(
  ({ request }) => request.destination === 'script',
  new StaleWhileRevalidate({
    cacheName: 'js-cache',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [200]
      })
    ]
  })
);

Фильтрация по заголовкам

CacheableResponsePlugin позволяет использовать строгие правила по заголовкам. Например, можно кэшировать только JSON-ответы:

new CacheableResponsePlugin({
  headers: {
    'Content-Type': ['application/json']
  }
});

При этом любые ответы с другим Content-Type будут автоматически игнорироваться и не попадут в кэш.

Совместимость с другими плагинами Workbox

CacheableResponsePlugin часто используется совместно с:

  • ExpirationPlugin – контроль времени жизни и максимального количества элементов кэша.
  • BroadcastUpdatePlugin – уведомление клиентов об обновлении кэша.
  • RangeRequestsPlugin – поддержка кэширования частичных запросов (например, видео).

Пример комбинированного использования:

import { ExpirationPlugin } from 'workbox-expiration';

new CacheFirst({
  cacheName: 'videos-cache',
  plugins: [
    new CacheableResponsePlugin({ statuses: [200] }),
    new ExpirationPlugin({
      maxEntries: 20,
      maxAgeSeconds: 7 * 24 * 60 * 60
    })
  ]
});

Резюме поведения плагина

  • Контроль кэшируемых ответов по статусам и заголовкам.
  • Защита кэша от ошибок и неподходящих ответов.
  • Простое интегрирование с любой стратегией Workbox.
  • Совместимость с другими плагинами для расширенного управления кэшом.

CacheableResponsePlugin делает кэширование предсказуемым и безопасным, исключая неожиданные ответы и обеспечивая соответствие политики кэширования требованиям приложения.

Оглавление