Маршрутизация по типу ресурса

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

Основы маршрутизации по типу ресурса

Маршрутизация по типу ресурса строится на сопоставлении типов MIME или расширений файлов с определёнными обработчиками. Workbox предоставляет метод registerRoute, который принимает следующие аргументы:

  1. matchCallback — функция или шаблон, определяющий, какие запросы будут обработаны.
  2. handler — стратегия кеширования (cacheFirst, networkFirst, staleWhileRevalidate и т. д.).
  3. method — HTTP-метод (по умолчанию GET).

Пример базовой маршрутизации по расширению файла:

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

registerRoute(
  ({ request }) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'images-cache',
    plugins: [
      // Плагины для управления кешем и его размерами
    ],
  })
);

В данном примере все запросы с типом ресурса image будут обрабатываться стратегией CacheFirst. Это означает, что сначала сервис-воркер будет искать ресурс в кеше, и только если его нет — обращаться к сети.

Категории ресурсов

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

  • document — HTML-документы.
  • script — JavaScript-файлы.
  • style — CSS-файлы.
  • image — изображения (png, jpg, svg и др.).
  • font — шрифты.
  • manifest — манифесты веб-приложений.
  • audio и video — мультимедиа-файлы.

Использование свойства request.destination позволяет точно определить тип ресурса, независимо от расширения файла или пути.

Примеры стратегий для разных типов ресурсов

JavaScript и CSS

import { StaleWhileRevalidate } from 'workbox-strategies';

registerRoute(
  ({ request }) => request.destination === 'script' || request.destination === 'style',
  new StaleWhileRevalidate({
    cacheName: 'static-resources',
    plugins: [
      // Например, плагин для автоматического удаления старых кешей
    ],
  })
);

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

Изображения

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

registerRoute(
  ({ request }) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'images-cache',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 50,
        maxAgeSeconds: 30 * 24 * 60 * 60, // 30 дней
      }),
    ],
  })
);

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

Шрифты

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

registerRoute(
  ({ request }) => request.destination === 'font',
  new CacheFirst({
    cacheName: 'fonts-cache',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 20,
        maxAgeSeconds: 365 * 24 * 60 * 60, // 1 год
      }),
    ],
  })
);

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

Сопоставление по регулярным выражениям

Иногда полезно маршрутизировать по расширению файла, а не только по request.destination. Для этого Workbox поддерживает использование регулярных выражений:

registerRoute(
  /\.(?:png|jpg|jpeg|svg|gif)$/,
  new CacheFirst({
    cacheName: 'images-cache',
    plugins: [
      new ExpirationPlugin({ maxEntries: 60 }),
    ],
  })
);

Это полезно для случаев, когда сервер возвращает некорректный Content-Type или когда нужно объединить несколько типов ресурсов в одну стратегию.

Плагины Workbox для управления кешем

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

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

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

import { CacheableResponsePlugin } from 'workbox-cacheable-response';
import { BroadcastUpdatePlugin } from 'workbox-broadcast-update';

registerRoute(
  ({ request }) => request.destination === 'script',
  new StaleWhileRevalidate({
    cacheName: 'js-cache',
    plugins: [
      new CacheableResponsePlugin({ statuses: [0, 200] }),
      new BroadcastUpdatePlugin({ channelName: 'js-updates' }),
    ],
  })
);

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

Workbox позволяет создавать динамические маршруты на основе более сложной логики, используя функцию matchCallback. Например, можно обрабатывать определённые файлы по шаблону URL и типу ресурса одновременно:

registerRoute(
  ({ request, url }) => url.pathname.startsWith('/assets/') && request.destination === 'image',
  new CacheFirst({ cacheName: 'assets-images' })
);

Такой подход позволяет объединять преимущества маршрутизации по типу ресурса и по пути, создавая гибкую и масштабируемую структуру кеширования.

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

Оглавление