Фильтрация по статус-кодам

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

Основы фильтрации по статус-кодам

В Workbox фильтрация по статусу HTTP осуществляется с помощью объекта matchCallback или параметра plugins, в частности через плагин CacheableResponsePlugin. Этот плагин позволяет указать, какие коды ответов считаются валидными для кэширования.

Пример базовой конфигурации:

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

registerRoute(
  ({ request }) => request.destination === 'script',
  new StaleWhileRevalidate({
    cacheName: 'js-cache',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200] // Только ответы с кодами 0 (opaque) и 200 попадут в кэш
      })
    ]
  })
);

Ключевые моменты:

  • statuses — массив кодов HTTP, которые будут считаться допустимыми для кэширования.
  • Код 0 используется для opaque-ответов, которые приходят с кросс-доменных ресурсов без CORS.
  • Код 200 — стандартный успешный ответ HTTP.

Использование фильтрации для разных типов ресурсов

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

  1. Статические файлы (JS, CSS, изображения) Обычно в этих случаях достаточно фильтрации на statuses: [0, 200], так как большинство файлов доступны напрямую с сервера и их кэширование безопасно.

  2. API-запросы Для данных с сервера важно учитывать коды ошибок: например, 404 или 500 не должны попадать в кэш. Пример:

import { NetworkFirst } from 'workbox-strategies';

registerRoute(
  ({ url }) => url.pathname.startsWith('/api/'),
  new NetworkFirst({
    cacheName: 'api-cache',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [200] // Только успешные ответы кэшируются
      })
    ]
  })
);

Особенности:

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

Сочетание с другими фильтрами

Workbox позволяет комбинировать фильтрацию по статусам с другими условиями, например, по типу контента (headers) или по размеру ответа.

Пример расширенной фильтрации:

import { CacheableResponsePlugin } from 'workbox-cacheable-response';

const cachePlugin = new CacheableResponsePlugin({
  statuses: [200],
  headers: {
    'Content-Type': 'application/json'
  }
});

Здесь применяется сразу два фильтра:

  • statuses: [200] — только успешные ответы.
  • headers — только ответы с Content-Type: application/json.

Это позволяет исключить нежелательные данные из кэша, например, HTML-страницы вместо JSON.

Реакция на ошибки сети и кэш

Фильтрация по статусу тесно связана с стратегиями кэширования. Например:

  • В стратегии CacheFirst фильтрация по статусу гарантирует, что в кэш попадут только валидные ответы, а при ошибках сервера будет использован старый кэш или возвращена ошибка.
  • В стратегии NetworkFirst фильтрация предотвращает кэширование неудачных попыток и позволяет приложению корректно реагировать на сетевые ошибки.

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

  • Всегда указывать коды статуса для API-запросов, чтобы исключить кэширование ошибок.
  • Добавлять 0 в список для статических ресурсов, загружаемых с кросс-доменных источников без CORS.
  • Комбинировать с другими плагинами (ExpirationPlugin, BroadcastUpdatePlugin) для расширенной логики управления кэшом.
  • Тестировать сценарии офлайн: убедиться, что фильтрация не блокирует нужные ресурсы, но при этом исключает ошибочные ответы.

Дополнительные возможности

Плагин CacheableResponsePlugin также позволяет фильтровать ответы по диапазону статусов:

new CacheableResponsePlugin({
  statuses: Array.from({ length: 100 }, (_, i) => 200 + i) // Любые ответы 200–299
});

Это удобно для работы с REST API, где могут использоваться различные успешные коды (201 Created, 204 No Content и т.д.).

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

Оглавление