Ограничение времени жизни записей

Workbox предоставляет гибкий механизм для управления кэшированием ресурсов в сервис-воркерах, включая возможность ограничения времени жизни (TTL — Time To Live) кэшированных записей. Это критически важно для обеспечения актуальности данных, предотвращения устаревших ресурсов и контроля размера кэша.

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

Основной инструмент для управления временем жизни записей — плагин ExpirationPlugin, который входит в пакет workbox-expiration. Он позволяет задавать два ключевых ограничения: максимальный срок хранения и максимальное количество записей в кэше.

import {registerRoute} from 'workbox-routing';
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,       // Максимум 50 изображений
        maxAgeSeconds: 7 * 24 * 60 * 60, // 7 дней
      }),
    ],
  })
);

Пояснение ключевых параметров:

  • maxEntries — ограничение количества объектов в кэше. Если лимит превышен, старые записи удаляются по принципу LRU (Least Recently Used).
  • maxAgeSeconds — максимальный возраст записи в секундах. После его истечения ресурс автоматически удаляется из кэша.

Комбинирование с другими стратегиями кэширования

Плагин ExpirationPlugin можно использовать совместно с различными стратегиями кэширования: CacheFirst, StaleWhileRevalidate, NetworkFirst. Это позволяет одновременно управлять временем жизни ресурсов и определять, как именно будет производиться поиск и обновление данных.

import {StaleWhileRevalidate} from 'workbox-strategies';

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

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

Автоматическая очистка кэша

Workbox обеспечивает автоматическую очистку кэша при превышении ограничений maxEntries или maxAgeSeconds. Пользователю не требуется вручную проверять устаревшие записи. Плагин работает на основе принципа LRU:

  1. Сначала проверяется возраст каждой записи (maxAgeSeconds).
  2. Затем оценивается количество записей (maxEntries).
  3. Если лимит превышен, самые старые и наименее используемые ресурсы удаляются первыми.

Ограничение времени жизни для динамических данных

Для динамического контента, например JSON-ответов API, ExpirationPlugin также применяется. Рекомендуется задавать короткие TTL, чтобы пользователи не получали устаревшие данные.

registerRoute(
  ({url}) => url.origin === 'https://api.example.com' && url.pathname.startsWith('/data'),
  new NetworkFirst({
    cacheName: 'api-cache',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 100,
        maxAgeSeconds: 60 * 60, // 1 час
      }),
    ],
  })
);

Взаимодействие с CacheableResponsePlugin

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

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

new CacheFirst({
  cacheName: 'html-cache',
  plugins: [
    new ExpirationPlugin({ maxAgeSeconds: 24 * 60 * 60 }),
    new CacheableResponsePlugin({ statuses: [200] }),
  ],
});

Особенности использования TTL в Workbox

  • TTL учитывается только для кэшированных объектов, а не для стратегий работы с сетью.
  • Устаревшие записи удаляются при следующем обращении к кэшу; полностью автоматическая синхронная очистка в фоне не происходит.
  • ExpirationPlugin работает только с кэшами, управляемыми Workbox. Для сторонних кэшей или ручного кэширования требуется дополнительная логика.

Практические рекомендации

  1. Для статических ресурсов (CSS, JS, изображения) — устанавливать maxAgeSeconds на срок обновления версии.
  2. Для динамических данных (API) — короткие TTL, чтобы поддерживать актуальность.
  3. Совмещать с maxEntries, чтобы контролировать размер кэша и предотвращать переполнение устройства пользователя.
  4. Использовать вместе с CacheableResponsePlugin, чтобы исключить кэширование ошибок.
  5. Проверять LRU-поведение при больших объёмах данных, чтобы убедиться, что часто используемые записи сохраняются.

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

Оглавление