Маршруты для сторонних доменов

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

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

Регистрация маршрутов для внешних ресурсов

Для работы со сторонними доменами используется метод registerRoute из workbox-routing. Ключевым элементом является условие маршрута, которое определяет, какие запросы обрабатываются сервис-воркером.

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

// Пример маршрута для CDN
registerRoute(
  ({ url }) => url.origin === 'https://cdn.example.com',
  new StaleWhileRevalidate({
    cacheName: 'cdn-resources',
    plugins: [
      // Можно добавить плагины для кэширования или логирования
    ],
  })
);
  • url.origin позволяет фильтровать ресурсы по домену.
  • StaleWhileRevalidate — стратегия, возвращающая кэшированный ресурс сразу и одновременно обновляющая его из сети.

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

registerRoute(
  ({ url }) => /https:\/\/api\.example\.com\/v1\//.test(url.href),
  new StaleWhileRevalidate({
    cacheName: 'api-cache',
    plugins: [
      // Плагины для управления сроком жизни и максимальным количеством кэшированных элементов
    ],
  })
);

Стратегии кэширования для сторонних доменов

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

  1. Cache First — для больших и редко обновляемых ресурсов (например, шрифтов, изображений с CDN).
  2. Network First — для данных API, где важна свежесть.
  3. Stale While Revalidate — для промежуточного варианта, когда ресурс часто используется и допустимо немного устаревшее состояние.

Пример использования CacheFirst для стороннего шрифта:

import { CacheFirst } from 'workbox-strategies';
import { ExpirationPlugin } from 'workbox-expiration';

registerRoute(
  ({ url }) => url.origin === 'https://fonts.googleapis.com' || url.origin === 'https://fonts.gstatic.com',
  new CacheFirst({
    cacheName: 'google-fonts',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 20,
        maxAgeSeconds: 30 * 24 * 60 * 60, // 30 дней
      }),
    ],
  })
);

Использование плагинов для управления сторонними ресурсами

Workbox предоставляет набор плагинов, которые облегчают работу с внешними ресурсами:

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

Пример с фильтрацией успешных ответов:

import { CacheableResponsePlugin } from 'workbox-cacheable-response';

registerRoute(
  ({ url }) => url.origin === 'https://api.example.com',
  new StaleWhileRevalidate({
    cacheName: 'api-cache',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  })
);

Работа с CORS и запросами к внешним API

При кэшировании сторонних ресурсов необходимо учитывать CORS-заголовки. Браузер не позволяет сохранять в кэш ресурсы с cross-origin без корректных заголовков, поэтому для API лучше использовать mode: 'cors' и проверять, что сервер разрешает кэширование.

Пример запроса к API через сервис-воркер:

registerRoute(
  ({ url }) => url.origin === 'https://api.example.com',
  async ({ request }) => {
    const response = await fetch(request, { mode: 'cors' });
    return response;
  }
);

Применение динамических маршрутов

Для динамических ресурсов с непредсказуемыми URL (например, запросы с параметрами) можно использовать функцию matchCallback:

registerRoute(
  ({ url }) => url.href.startsWith('https://cdn.example.com/images/'),
  new CacheFirst({
    cacheName: 'dynamic-images',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 50,
        maxAgeSeconds: 7 * 24 * 60 * 60, // неделя
      }),
    ],
  })
);

Динамические маршруты позволяют контролировать не только статические файлы, но и результаты API-запросов с переменными параметрами.

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

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

import { setDefaultHandler } from 'workbox-routing';

setDefaultHandler(({ request, event }) => {
  console.log('Обрабатывается запрос:', request.url);
  return fetch(request);
});

Это особенно полезно при работе со сторонними доменами, чтобы убедиться, что стратегия кэширования применяется корректно.

Оглавление