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

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

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

Сопоставление строк в Workbox работает через передачу строки или массива строк в методах registerRoute и Routing.registerRoute. Строка интерпретируется как точное совпадение пути запроса, начиная с корня сайта, если не указан специальный шаблон.

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

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

registerRoute(
  '/styles/main.css',
  new StaleWhileRevalidate()
);

В этом примере только запросы к /styles/main.css будут обрабатываться стратегией StaleWhileRevalidate. Все остальные запросы будут проигнорированы.

Сопоставление по маске с подстрокой

Workbox позволяет использовать маски с подстрокой, используя синтаксис с символом *. Такой подход полезен для обработки запросов к набору ресурсов, расположенных в одном каталоге или имеющих общий префикс.

Пример:

registerRoute(
  '/images/*',
  new StaleWhileRevalidate()
);

Здесь будут сопоставляться все запросы, начинающиеся с /images/, включая /images/logo.png и /images/icons/icon1.svg.

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

Строки обеспечивают простое сопоставление и меньше загружают процесс регистрации маршрутов, чем регулярные выражения. Однако следует учитывать, что:

  • Строки не поддерживают сложные паттерны (например, выбор расширений через |).
  • Для динамического сопоставления с условием необходимо использовать регулярные выражения или функции-предикаты.

Пример ограничения:

// Нельзя так:
registerRoute(
  '/images/*.png|.jpg', // это не сработает
  new StaleWhileRevalidate()
);

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

registerRoute(
  /\.(?:png|jpg)$/,
  new StaleWhileRevalidate()
);

Использование массива строк

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

registerRoute(
  [
    '/styles/main.css',
    '/scripts/app.js',
    '/offline.html'
  ],
  new NetworkFirst()
);

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

Особенности обработки строк с query-параметрами

Сопоставление строк учитывает путь запроса без query-параметров, если не использовать дополнительную обработку. Например:

registerRoute(
  '/api/data',
  new NetworkFirst()
);

Запрос к /api/data?user=123 не будет совпадать с маршрутом. Чтобы обрабатывать такие варианты, нужно либо использовать регулярные выражения, либо создать функцию-предикат:

registerRoute(
  ({ url }) => url.pathname.startsWith('/api/data'),
  new NetworkFirst()
);

Сопоставление строк с учётом поддомена и протокола

При передаче строки Workbox проверяет только путь URL. Протокол (http/https) и домен учитываются, только если указать их явно:

registerRoute(
  'https://example.com/styles/main.css',
  new CacheFirst()
);

Если домен не указан, Workbox предполагает текущий origin. Это особенно важно для проектов, использующих несколько поддоменов или CDN.

Применение к статическим ресурсам

Сопоставление строк идеально подходит для:

  • CSS и JS файлов, когда путь известен и фиксирован.
  • Статических HTML страниц, например /offline.html.
  • Изображений и иконок, расположенных в отдельных каталогах.

Стратегии кэширования могут быть любыми, но чаще всего используются CacheFirst для ресурсов, которые редко изменяются, и StaleWhileRevalidate для часто обновляемых статических ресурсов.

Резюме ключевых моментов

  • Строки — это простой способ сопоставления фиксированных путей запросов.
  • Маски с * позволяют обрабатывать группы ресурсов.
  • Массив строк сокращает количество вызовов registerRoute.
  • Строки не подходят для динамических query-параметров или сложных паттернов.
  • Для обработки всех вариантов с query или поддоменами рекомендуется использовать функции-предикаты или регулярные выражения.

Строковое сопоставление является фундаментальным инструментом Workbox для статического контента, обеспечивая лёгкость и читаемость конфигурации кэширования.

Оглавление