Параметр ignoreUrlParametersMatching

Параметр ignoreUrlParametersMatching используется для управления кэшированием ресурсов с динамическими URL, содержащими параметры запроса. Часто веб-приложения используют URL с query-параметрами для управления контентом или аналитикой, например:

/index.html?utm_source=google
/style.css?v=2.1
/script.js?cacheBust=12345

Без корректной настройки сервис-воркера такие URL будут рассматриваться как разные ресурсы, что приведёт к лишним сетевым запросам и дублированию кэша.

Синтаксис

ignoreUrlParametersMatching принимает массив регулярных выражений. Каждое регулярное выражение применяется к query-параметрам URL. Если параметр совпадает с шаблоном, он игнорируется при проверке кэша.

Пример конфигурации в sw-precache-config.js:

module.exports = {
  staticFileGlobs: [
    'public/**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff}'
  ],
  stripPrefix: 'public/',
  ignoreUrlParametersMatching: [/^utm_/, /^fbclid$/]
};

В этом примере сервис-воркер не будет учитывать параметры, начинающиеся с utm_ и точное совпадение с fbclid. Таким образом, URL:

/index.html?utm_source=google
/index.html?utm_medium=cpc
/index.html?fbclid=ABC123

будут сопоставлены с одним и тем же закэшированным файлом /index.html.

Как работает сопоставление

  1. Когда браузер делает запрос с query-параметрами, сервис-воркер сравнивает URL с кэшем.
  2. Все параметры, совпадающие с регулярными выражениями из ignoreUrlParametersMatching, удаляются из сравнения.
  3. Результирующий URL проверяется в кэше.
  4. Если ресурс найден — возвращается из кэша, иначе — выполняется сетевой запрос.

Примеры использования

Игнорирование версии кэша для JS и CSS файлов

ignoreUrlParametersMatching: [/^v$/]

URL /script.js?v=2.0 и /script.js?v=2.1 будут рассматриваться как один файл /script.js, что удобно для версионирования ресурсов.

Полное игнорирование всех параметров

ignoreUrlParametersMatching: [/.*/]

Все query-параметры будут игнорироваться. Этот вариант подходит для приложений, где параметры не влияют на содержимое.

Комбинированное использование

ignoreUrlParametersMatching: [/^utm_/, /^ref$/, /^v$/]

Позволяет игнорировать параметры аналитики (utm_), параметры ссылок (ref) и версии файлов (v) одновременно.

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

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

Взаимодействие с другими параметрами Sw-precache

  • stripPrefix: удаляет указанную часть пути при кэшировании.
  • runtimeCaching: позволяет добавлять правила кэширования для динамических запросов.
  • navigateFallback: определяет fallback для навигационных запросов, работающих совместно с ignoreUrlParametersMatching, чтобы корректно обслуживать SPA с query-параметрами.

Частые ошибки

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

ignoreUrlParametersMatching является ключевым инструментом для оптимизации кэширования в сервис-воркерах, позволяя контролировать обработку динамических URL и предотвращать дублирование ресурсов.

Оглавление