Настройка urlPattern для маршрутизации запросов

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

Основы urlPattern

urlPattern может быть представлен в двух форматах:

  1. Строка — совпадает с точным URL или относительным путем.
  2. Регулярное выражение (RegExp) — позволяет гибко управлять выборкой URL, например, группировать ресурсы по типу или по директории.

Пример строкового urlPattern:

urlPattern: '/images/logo.png'

Пример регулярного выражения:

urlPattern: /\/images\/.*\.png$/

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

Поддерживаемые типы запросов

urlPattern совместим с методами HTTP-запросов, которые определяются через handler:

  • networkFirst — сначала пробует получить ресурс с сети, при неудаче использует кеш.
  • cacheFirst — сначала ищет ресурс в кеше, при отсутствии — обращается к сети.
  • fastest — параллельно делает запрос в сеть и кеш, возвращает первый доступный результат.
  • networkOnly — всегда обращается к сети.
  • cacheOnly — всегда берет ресурс из кеша.

Пример настройки для картинок:

runtimeCaching: [{
  urlPattern: /\/images\/.*\.png$/,
  handler: 'cacheFirst',
  options: {
    cache: {
      name: 'image-cache',
      maxEntries: 50,
      maxAgeSeconds: 30 * 24 * 60 * 60 // 30 дней
    }
  }
}]

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

  • Символ ^ — начало строки; полезен для ограничения совпадений на корневом пути.
  • Символ $ — конец строки; гарантирует совпадение только с определенным расширением или конкретным файлом.
  • Символ .* — любой набор символов; используется для поддиректорий и динамических путей.
  • Скобки () и квантификаторы +, ?, {n,m} позволяют создавать сложные шаблоны для многоуровневых маршрутов.

Пример для маршрутов API:

urlPattern: /^\/api\/v\d+\/users\/\d+$/

Этот паттерн будет перехватывать запросы вроде /api/v1/users/42 или /api/v2/users/105.

Параметры options для кеширования

urlPattern тесно связан с объектом options, который позволяет настроить стратегию кеширования и ограничить объем хранилища:

  • cache.name — имя кеша.
  • cache.maxEntries — максимальное количество элементов в кеше.
  • cache.maxAgeSeconds — срок жизни кеша в секундах.
  • cache.matchOptions — дополнительные параметры для метода Cache.match().

Пример с ограничением кеша:

runtimeCaching: [{
  urlPattern: /\/static\/.*\.js$/,
  handler: 'cacheFirst',
  options: {
    cache: {
      name: 'js-cache',
      maxEntries: 20,
      maxAgeSeconds: 7 * 24 * 60 * 60 // 7 дней
    }
  }
}]

Советы по оптимизации urlPattern

  1. Минимизировать количество запросов в сеть Кешировать статические файлы, которые редко изменяются (.js, .css, .png, .svg).

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

  3. Разделять кеши по типам контента Например, отдельные кеши для изображений, скриптов и API-запросов. Это упрощает управление и очистку устаревших данных.

  4. Контролировать срок жизни кеша Для динамических данных задавать небольшой maxAgeSeconds, чтобы сервис-воркер не возвращал устаревшую информацию.

Примеры сложных конфигураций

Перехват всех изображений и шрифтов с разными стратегиями:

runtimeCaching: [
  {
    urlPattern: /\/images\/.*\.(png|jpg|jpeg|svg)$/,
    handler: 'cacheFirst',
    options: {
      cache: {
        name: 'media-cache',
        maxEntries: 100,
        maxAgeSeconds: 60 * 24 * 60 * 60 // 60 дней
      }
    }
  },
  {
    urlPattern: /\/fonts\/.*\.(woff2|woff|ttf)$/,
    handler: 'cacheFirst',
    options: {
      cache: {
        name: 'font-cache',
        maxEntries: 20,
        maxAgeSeconds: 365 * 24 * 60 * 60 // 1 год
      }
    }
  }
]

Комбинация строкового и регулярного URL:

runtimeCaching: [
  {
    urlPattern: '/offline.html',
    handler: 'cacheFirst'
  },
  {
    urlPattern: /\/api\/.*$/,
    handler: 'networkFirst'
  }
]

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

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

Оглавление