Сопоставление запросов с помощью функций

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

Основы сопоставления запросов

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

Сигнатура функции сопоставления выглядит следующим образом:

function matchCallback({ url, request, event }) {
    // url: объект URL запроса
    // request: объект Request
    // event: событие fetch
    return true | false;
}
  • url — экземпляр URL, представляющий адрес запроса, позволяет анализировать протокол, путь, параметры.
  • request — оригинальный объект запроса, доступный для проверки заголовков, метода (GET, POST и др.).
  • event — объект события fetch, полезный для более сложных сценариев (например, с проверкой referrer или clientId).

Возвращаемое значение функции должно быть логическим: true для соответствия стратегии, false — если стратегия применяться не должна.

Примеры использования функций для сопоставления

  1. Сопоставление по пути и параметрам
import { registerRoute } from 'workbox-routing';
import { NetworkFirst } from 'workbox-strategies';

registerRoute(
  ({ url }) => url.pathname.startsWith('/api/data') && url.searchParams.has('v'),
  new NetworkFirst({
    cacheName: 'api-cache',
  })
);

В этом примере стратегия NetworkFirst применяется только к запросам с путём, начинающимся с /api/data и содержащим параметр v.

  1. Сопоставление по заголовкам запроса
registerRoute(
  ({ request }) => request.headers.get('X-Custom-Header') === 'Workbox',
  new NetworkFirst({
    cacheName: 'custom-header-cache',
  })
);

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

  1. Сложное сопоставление с учётом метода запроса
registerRoute(
  ({ url, request }) => url.pathname.endsWith('.json') && request.method === 'GET',
  new NetworkFirst({
    cacheName: 'json-cache',
  })
);

Это позволяет кэшировать только GET-запросы к JSON-файлам, игнорируя POST или PUT-запросы.

Варианты интеграции с различными стратегиями

Функции сопоставления можно комбинировать с любыми стратегиями Workbox:

  • CacheFirst — сначала проверяется кэш, затем сеть.
  • NetworkFirst — сначала сеть, затем кэш при недоступности.
  • StaleWhileRevalidate — отдаёт старый кэш и одновременно обновляет его из сети.
  • NetworkOnly / CacheOnly — чистая отправка запроса в сеть или из кэша.

Пример:

import { StaleWhileRevalidate } from 'workbox-strategies';

registerRoute(
  ({ url }) => url.origin === 'https://cdn.example.com',
  new StaleWhileRevalidate({
    cacheName: 'cdn-assets',
    plugins: [
      {
        cacheWillUpdate: async ({ response }) => {
          if (response.status === 200) return response;
          return null;
        }
      }
    ]
  })
);

Здесь используется функция для фильтрации только запросов к конкретному хосту и условие для обновления кэша только при успешном ответе.

Советы по организации функций сопоставления

  1. Разделение логики: если условие сложное, стоит выносить его в отдельные функции с осмысленными именами для улучшения читаемости.
  2. Минимизация вычислений: функции вызываются для каждого запроса, поэтому тяжелые операции внутри них могут снижать производительность.
  3. Тестируемость: благодаря отдельным функциям легко писать модульные тесты для сопоставления запросов.

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

  • Кэширование API с фильтрацией по параметрам.
  • Обработка мультимедийных ресурсов, где важно кэшировать только определённые форматы.
  • Поддержка версионирования ресурсов через query-параметры.
  • Динамическое управление стратегиями в зависимости от типа устройства или пользователя.

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

Оглавление