Cache Only

Принцип работы

Стратегия Cache Only в библиотеке Workbox предназначена для ситуаций, когда все запросы должны обслуживаться исключительно из кэша. Любые сетевые обращения при использовании этой стратегии отсутствуют. Если запрошенный ресурс отсутствует в кэше, запрос завершится неудачей с соответствующей ошибкой. Эта стратегия идеально подходит для ресурсов, которые редко изменяются, но должны быть доступны оффлайн, например, статические изображения, шрифты или локальные скрипты.

Использование с Workbox

Для реализации стратегии Cache Only необходимо импортировать соответствующие классы из Workbox:

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

Пример регистрации маршрута

registerRoute(
  ({ request }) => request.destination === 'image',
  new CacheOnly({
    cacheName: 'images-cache',
    matchOptions: {
      ignoreSearch: true
    }
  })
);

В этом примере:

  • request.destination === 'image' фильтрует запросы только к изображениям.
  • cacheName: 'images-cache' задаёт имя кэша, из которого будут извлекаться ресурсы.
  • matchOptions.ignoreSearch: true позволяет игнорировать параметры запроса в URL при поиске ресурса в кэше.

Настройка параметров стратегии

Объект CacheOnly поддерживает несколько ключевых параметров, которые позволяют гибко управлять поведением стратегии:

  • cacheName — имя кэша, где хранятся ресурсы. Если не задано, используется кэш по умолчанию.
  • matchOptions — объект с опциями для метода Cache.match, например, ignoreSearch, ignoreVary, cacheName.
  • plugins — массив плагинов Workbox, которые можно использовать для расширения функционала кэширования. Например, ExpirationPlugin для ограничения числа элементов в кэше или BroadcastUpdatePlugin для уведомления об изменениях.

Пример с плагином ExpirationPlugin

import { ExpirationPlugin } from 'workbox-expiration';

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

Здесь:

  • maxEntries ограничивает количество элементов в кэше.
  • maxAgeSeconds задаёт срок жизни ресурсов.

Особенности и рекомендации

  • Стратегия Cache Only не подходит для данных, которые часто обновляются или критичны к актуальности. Использование её для таких ресурсов приведёт к устаревшему контенту.
  • При интеграции с другими стратегиями важно учитывать порядок регистрации маршрутов. Если один маршрут с Cache Only перекрывает другой с более гибкой стратегией, сетевой запрос может не выполняться.
  • Для оффлайн-приложений Cache Only идеально подходит для предварительно кэшируемых ассетов через precache, обеспечивая мгновенный доступ без сетевых задержек.

Совмещение с precaching

import { precacheAndRoute } from 'workbox-precaching';

precacheAndRoute([
  { url: '/offline.html', revision: '1234' },
  { url: '/styles/main.css', revision: '5678' }
]);

registerRoute(
  ({ request }) => request.destination === 'document',
  new CacheOnly({
    cacheName: 'precache-v1'
  })
);

В этом примере документы будут извлекаться исключительно из предзагруженного кэша. Если документ отсутствует в кэше, сервис-воркер вернёт ошибку, что подчёркивает строгость стратегии Cache Only.

Отладка и тестирование

  • Использование DevTools позволяет проверить, действительно ли запросы обслуживаются только из кэша. Вкладка Application → Cache Storage покажет содержимое выбранного кэша.
  • При тестировании важно учитывать ignoreSearch и другие опции, чтобы избежать ситуации, когда запросы с параметрами не находят ресурсы.

Преимущества стратегии Cache Only

  • Мгновенная отдача ресурсов без сетевых задержек.
  • Полная предсказуемость работы кэша.
  • Упрощённое управление оффлайн-контентом.

Ограничения

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

Заключение по применению

Cache Only используется там, где ключевым является оффлайн-доступ и стабильность ресурсов, а не актуальность. Чёткая настройка cacheName, matchOptions и плагинов позволяет адаптировать стратегию под конкретные задачи, избегая лишнего сетевого трафика и обеспечивая мгновенную загрузку кэшированных файлов.

Оглавление