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

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

Маршрутизация и фильтрация запросов

Workbox оперирует понятиями маршрутов (routes) и стратегий (strategies). Маршрут определяет, какие запросы сервис-воркер будет перехватывать, а стратегия — как эти запросы будут обрабатываться (кэширование, сетевой запрос, комбинированные подходы).

Для проверки источника запросов используется параметр matchCallback в registerRoute. Этот колбэк позволяет выполнять произвольную проверку URL, метода запроса или других свойств объекта Request.

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

registerRoute(
  ({ url, request, event }) => {
    // Проверка домена запроса
    return url.origin === self.location.origin && url.pathname.startsWith('/api/');
  },
  new NetworkFirst()
);

В приведённом примере маршрут перехватывает только локальные API-запросы, игнорируя внешние ресурсы. Такой подход снижает риск случайного кэширования постороннего контента.

Методы проверки источника

  1. Сравнение домена (url.origin) Позволяет точно определить, принадлежит ли запрос к доверенному источнику.

  2. Проверка пути (url.pathname) Дает возможность ограничить обработку только определёнными подпутями, например /api/, /assets/.

  3. Метод запроса (request.method) Важно различать GET, POST и другие HTTP-методы. Workbox по умолчанию чаще работает с GET-запросами, но при необходимости можно фильтровать любые методы:

registerRoute(
  ({ request }) => request.method === 'GET' && request.url.includes('/static/'),
  new NetworkFirst()
);
  1. Проверка заголовков (request.headers) Для продвинутых сценариев можно фильтровать запросы по наличию определённых заголовков, например Authorization.
registerRoute(
  ({ request }) => request.headers.get('Authorization') !== null,
  new NetworkFirst()
);

Использование регулярных выражений

Workbox позволяет использовать регулярные выражения в качестве фильтров URL. Это удобно, когда необходимо проверять несколько похожих маршрутов одновременно:

registerRoute(
  /\/images\/.*\.(png|jpg|jpeg|gif)/,
  new CacheFirst({
    cacheName: 'images-cache',
    plugins: [
      // Плагины кэширования, например для очистки старых версий
    ]
  })
);

Регулярные выражения обеспечивают гибкость при проверке пути и расширений файлов, однако для сложной логики часто удобнее использовать matchCallback.

Совместное использование стратегий и проверки источника

Разделение проверки источника и стратегии кэширования позволяет строить надежную архитектуру сервис-воркера. Например, можно применять стратегию NetworkFirst только к API-запросам, а для статических ресурсов использовать CacheFirst с отдельным кэшем.

// API-запросы
registerRoute(
  ({ url }) => url.origin === self.location.origin && url.pathname.startsWith('/api/'),
  new NetworkFirst({ cacheName: 'api-cache' })
);

// Статические файлы
registerRoute(
  ({ url }) => url.pathname.startsWith('/static/'),
  new CacheFirst({ cacheName: 'static-cache' })
);

Такой подход позволяет чётко разграничить источники данных, снижая вероятность конфликтов кэша и повышая производительность приложения.

Проверка на внешние запросы

Иногда необходимо полностью игнорировать сторонние запросы или обрабатывать их отдельно. Для этого можно добавить условие, проверяющее, что url.origin отличается от текущего:

registerRoute(
  ({ url }) => url.origin !== self.location.origin,
  new NetworkFirst({ cacheName: 'external-cache' })
);

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

Интеграция с Workbox Plugins

Workbox предоставляет плагины, которые можно комбинировать с проверкой источника:

  • ExpirationPlugin — контролирует время жизни кэша и количество объектов.
  • CacheableResponsePlugin — задаёт условия, по которым ответ считается кэшируемым (например, только статус 200 или тип basic).
  • BroadcastUpdatePlugin — уведомляет клиентов о новых версиях ресурсов.

Применение плагинов совместно с проверкой источника повышает безопасность и гибкость стратегии:

import { CacheFirst } from 'workbox-strategies';
import { ExpirationPlugin } from 'workbox-expiration';

registerRoute(
  ({ url }) => url.origin === self.location.origin && url.pathname.startsWith('/images/'),
  new CacheFirst({
    cacheName: 'images-cache',
    plugins: [
      new ExpirationPlugin({ maxEntries: 50, maxAgeSeconds: 7 * 24 * 60 * 60 })
    ]
  })
);

Итоговое наблюдение

Проверка источника запросов — это ключевой механизм безопасности и управляемости в Workbox. Она обеспечивает:

  • точный контроль, какие запросы кэшировать,
  • разграничение внутренних и внешних ресурсов,
  • совместимость со стратегиями кэширования и плагинами.

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

Оглавление