Плагин ExpirationPlugin

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

Основные параметры ExpirationPlugin

ExpirationPlugin принимает объект конфигурации с несколькими важными свойствами:

  • maxEntries — максимальное количество элементов в кэше. Когда лимит превышается, старейшие записи автоматически удаляются. Пример:

    new workbox.expiration.ExpirationPlugin({
  maxEntries: 50
});

  • maxAgeSeconds — максимальное время хранения ресурса в кэше в секундах. По истечении этого времени ресурс будет удалён при следующей проверке. Пример:

    new workbox.expiration.ExpirationPlugin({
  maxAgeSeconds: 7 * 24 * 60 * 60 // 7 дней
});

  • purgeOnQuotaError — булевый параметр. При значении true Workbox автоматически удаляет ресурсы из кэша при достижении лимитов хранилища браузера.

Использование ExpirationPlugin с разными стратегиями кэширования

ExpirationPlugin чаще всего применяется вместе с предопределёнными стратегиями кэширования Workbox: CacheFirst, NetworkFirst, StaleWhileRevalidate и другими.

Пример с CacheFirst:

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

В этом примере изображения кэшируются с ограничением на 100 элементов и сроком хранения 30 дней.

Пример с StaleWhileRevalidate:

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

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

Взаимодействие с другими плагинами

ExpirationPlugin часто комбинируется с плагинами CacheableResponsePlugin и BroadcastUpdatePlugin:

  • CacheableResponsePlugin позволяет кэшировать только ответы с определёнными кодами статуса или типами контента. Пример:

    plugins: [
  new workbox.cacheableResponse.CacheableResponsePlugin({
    statuses: [0, 200]
  }),
  new workbox.expiration.ExpirationPlugin({
    maxEntries: 50
  })
]

  • BroadcastUpdatePlugin уведомляет о том, что ресурс в кэше обновился, что удобно для синхронизации данных на клиенте.

Особенности работы и внутренние механизмы

  1. Очистка по количеству элементов (maxEntries) выполняется через алгоритм FIFO (first in, first out). Самые старые элементы удаляются первыми.
  2. Очистка по возрасту (maxAgeSeconds) происходит лениво — при обращении к кэшу проверяются возрастные ограничения, после чего устаревшие записи удаляются.
  3. Обработка QuotaExceededError: при переполнении хранилища браузера сработает опция purgeOnQuotaError, которая удаляет устаревшие элементы, позволяя сохранить новые запросы.

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

  • Для больших медиа-файлов или изображений рекомендуется использовать maxEntries, чтобы ограничить рост кэша.
  • Для часто обновляющихся скриптов или данных лучше ориентироваться на maxAgeSeconds, чтобы пользователи получали актуальные версии.
  • Использование обоих параметров одновременно (maxEntries + maxAgeSeconds) обеспечивает надёжное автоматическое управление кэшем.
  • В продакшн-проектах следует комбинировать ExpirationPlugin с CacheableResponsePlugin, чтобы кэш не переполнялся ошибочными ответами сервера.

Пример сложной конфигурации

workbox.routing.registerRoute(
  ({request}) => request.destination === 'document',
  new workbox.strategies.NetworkFirst({
    cacheName: 'html-cache',
    plugins: [
      new workbox.cacheableResponse.CacheableResponsePlugin({
        statuses: [200]
      }),
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 10,
        maxAgeSeconds: 60 * 60 * 24, // 1 день
        purgeOnQuotaError: true
      })
    ]
  })
);

Эта конфигурация обеспечивает кэширование HTML-документов с ограничением на 10 последних страниц, сроком хранения 1 день и автоматической очисткой при переполнении хранилища браузера.

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

Оглавление