Метод registerRoute и его варианты использования

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

Синтаксис базовой формы выглядит следующим образом:

workbox.routing.registerRoute(matchCallback, handler, method);
  • matchCallback — функция или регулярное выражение, определяющее, какие запросы будут обработаны.
  • handler — стратегия кэширования, определяющая, как реагировать на запрос (например, CacheFirst, NetworkFirst, StaleWhileRevalidate).
  • method — HTTP-метод, для которого применяется правило (GET по умолчанию).

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

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

workbox.routing.registerRoute(
  /\.(?:png|jpg|jpeg|svg|gif)$/,
  new workbox.strategies.CacheFirst({
    cacheName: 'images-cache',
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 60,
        maxAgeSeconds: 30 * 24 * 60 * 60, // 30 дней
      }),
    ],
  })
);

Ключевые моменты:

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

Фильтрация по URL через функцию

Функции-колбэки дают более гибкий контроль, чем регулярные выражения. Они получают объект запроса и возвращают true, если правило должно применяться:

workbox.routing.registerRoute(
  ({url}) => url.origin === 'https://api.example.com' && url.pathname.startsWith('/data/'),
  new workbox.strategies.NetworkFirst({
    cacheName: 'api-cache',
    networkTimeoutSeconds: 3,
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 50,
        maxAgeSeconds: 5 * 60, // 5 минут
      }),
    ],
  })
);

Особенности:

  • Позволяет фильтровать по origin, pathname, searchParams.
  • NetworkFirst сначала делает сетевой запрос, а при неудаче использует кэш.
  • networkTimeoutSeconds задаёт максимальное ожидание сети, после чего возвращается кэш.

Применение стратегий кэширования

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

  1. CacheFirst — идеально подходит для статических ресурсов, которые редко меняются.
  2. NetworkFirst — предпочтительна для динамических данных API, где свежесть информации важнее скорости.
  3. StaleWhileRevalidate — возвращает кэш сразу, параллельно обновляя его с сервера; баланс между скоростью и актуальностью.
  4. NetworkOnly — всегда обращается к сети, кэширование не применяется.
  5. CacheOnly — работает только с кэшем, не делает сетевых запросов.

Пример StaleWhileRevalidate для CSS и JS:

workbox.routing.registerRoute(
  /\.(?:css|js)$/,
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: 'static-resources',
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 30,
        maxAgeSeconds: 7 * 24 * 60 * 60, // 7 дней
      }),
    ],
  })
);

Использование методов HTTP

Метод registerRoute позволяет ограничивать правила конкретными HTTP-методами. По умолчанию используется GET. Например, фильтрация POST-запросов:

workbox.routing.registerRoute(
  ({url, request}) => url.pathname.startsWith('/submit'),
  new workbox.strategies.NetworkOnly(),
  'POST'
);

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

Комбинация нескольких условий

Для сложных приложений часто требуется объединение различных условий:

workbox.routing.registerRoute(
  ({url, request}) => {
    return url.origin === self.location.origin &&
           (url.pathname.endsWith('.jpg') || url.pathname.endsWith('.png')) &&
           request.destination === 'image';
  },
  new workbox.strategies.CacheFirst({
    cacheName: 'local-images',
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 100,
        maxAgeSeconds: 60 * 60 * 24 * 30,
      }),
    ],
  })
);

Преимущества такого подхода:

  • Гибкая фильтрация по типу ресурса (request.destination).
  • Ограничение по домену для локальных ресурсов.
  • Возможность точного управления кэшированием.

Работа с плагинами Workbox

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

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

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

workbox.routing.registerRoute(
  '/api/data',
  new workbox.strategies.NetworkFirst({
    cacheName: 'api-data',
    plugins: [
      new workbox.cacheableResponse.CacheableResponsePlugin({
        statuses: [0, 200],
      }),
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 20,
        maxAgeSeconds: 300,
      }),
    ],
  })
);

Здесь:

  • Только ответы с кодом 0 или 200 попадут в кэш.
  • Ограничение на 20 объектов и 5 минут хранения предотвращает переполнение кэша.

Динамическая маршрутизация

Метод registerRoute позволяет создавать динамические маршруты для ресурсов, которых заранее не существует в коде. Например:

workbox.routing.registerRoute(
  ({request}) => request.destination === 'document',
  new workbox.strategies.NetworkFirst({
    cacheName: 'pages-cache',
  })
);
  • Все HTML-документы будут кэшироваться с использованием NetworkFirst.
  • Обеспечивается оффлайн-доступ к страницам.

Особенности производительности

  • Не следует кэшировать POST-запросы, если требуется актуальность данных.
  • Использование StaleWhileRevalidate уменьшает время отклика страниц.
  • Регулярная очистка устаревших ресурсов через ExpirationPlugin предотвращает переполнение кэша.
Оглавление