Сопоставление запросов с помощью регулярных выражений

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

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

В Workbox для сопоставления URL запросов чаще всего применяется метод registerRoute(). Аргументом маршрута может быть регулярное выражение, которое будет проверять URL запроса. Это позволяет обрабатывать группы ресурсов, соответствующие определенному паттерну.

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

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

registerRoute(
  /.*\.png/,
  new StaleWhileRevalidate({
    cacheName: 'images-cache',
  })
);

В этом примере все запросы к ресурсам с расширением .png будут обрабатываться стратегией StaleWhileRevalidate, где сначала возвращается кэшированный ресурс, а затем выполняется обновление в фоне.

Сложные шаблоны регулярных выражений

Регулярные выражения могут быть использованы для более сложных сценариев:

  1. Сопоставление по папкам или путям:
registerRoute(
  /\/api\/v1\/users\/.*/,
  new NetworkFirst({
    cacheName: 'users-api-cache',
  })
);

Здесь все запросы к API, начинающиеся с /api/v1/users/, будут использовать стратегию NetworkFirst, что обеспечивает актуальные данные с сервера, сохраняя резервную копию в кэше.

  1. Сопоставление с несколькими расширениями файлов:
registerRoute(
  /\.(?:js|css|json)$/,
  new CacheFirst({
    cacheName: 'static-resources-cache',
  })
);

Использование группы (?:js|css|json) позволяет обрабатывать сразу несколько типов файлов одной стратегией.

Флаги регулярных выражений

Workbox поддерживает стандартные флаги JavaScript для регулярных выражений:

  • i — нечувствительность к регистру.
  • g — глобальный поиск.
  • m — многострочный режим.

Пример с нечувствительностью к регистру:

registerRoute(
  /\.jpg$/i,
  new CacheFirst({
    cacheName: 'jpg-images-cache',
  })
);

В этом случае будут совпадать как .jpg, так и .JPG.

Комбинирование регулярных выражений и функций

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

registerRoute(
  ({ url }) => /\/blog\/\d+/.test(url.pathname) && url.searchParams.has('preview'),
  new NetworkFirst({
    cacheName: 'blog-preview-cache',
  })
);

Такой подход позволяет сопоставлять URL на основе комплексных условий, включая параметры запроса.

Кэширование с приоритетами

Регулярные выражения можно использовать вместе с различными стратегиями кэширования Workbox:

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

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

Логирование и отладка маршрутов

Для проверки работы регулярных выражений полезно использовать консольное логирование:

registerRoute(
  /\/assets\/.*\.svg/,
  ({ url, event, params }) => {
    console.log('Обрабатывается SVG:', url.href);
    return new CacheFirst({
      cacheName: 'svg-cache',
    }).handle({ url, event, params });
  }
);

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

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

  1. Минимизировать использование жадных выражений (.*) для улучшения производительности.
  2. Тестировать регулярные выражения на всех возможных вариантах URL, чтобы избежать непреднамеренного кэширования.
  3. Разделять стратегии кэширования по типу ресурсов, комбинируя регулярные выражения с подходящей стратегией.

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

Оглавление