Настройка максимального времени хранения запросов

Workbox предоставляет гибкие инструменты для кэширования ресурсов на стороне клиента, позволяя контролировать как стратегию кэширования, так и параметры хранения данных. Одним из ключевых аспектов оптимизации является настройка максимального времени хранения запросов (maxAgeSeconds), который определяет, как долго ресурсы будут оставаться актуальными в кэше.

1. Основы параметра maxAgeSeconds

maxAgeSeconds указывается при создании правил кэширования и задает время жизни ресурса в секундах. После истечения этого периода Workbox помечает ресурс как устаревший и при следующем запросе инициирует его повторное получение с сервера.

Пример базовой конфигурации для CacheFirst:

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({
        maxAgeSeconds: 7 * 24 * 60 * 60, // 7 дней
      }),
    ],
  })
);

В этом примере все изображения кэшируются на 7 дней. После истечения срока они считаются устаревшими, и при следующем обращении к изображению будет выполнен сетевой запрос для обновления кэша.

2. Настройка maxEntries вместе с maxAgeSeconds

Workbox позволяет одновременно ограничивать количество элементов в кэше и время их хранения. Параметр maxEntries задает максимальное количество объектов в кэше, а maxAgeSeconds — срок их актуальности. Комбинация этих двух параметров обеспечивает оптимальное использование памяти и предотвращает переполнение кэша.

Пример:

import { StaleWhileRevalidate } from 'workbox-strategies';

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

В этом случае в кэше одновременно может находиться до 50 скриптов, каждый из которых хранится не дольше 30 дней. Старые элементы будут автоматически удаляться при превышении лимита или устаревании.

3. Применение maxAgeSeconds к динамическим данным

Для динамических API-запросов важно не только кэшировать данные, но и обеспечивать их актуальность. Workbox позволяет использовать maxAgeSeconds в сочетании с стратегиями NetworkFirst или StaleWhileRevalidate.

Пример для API-запросов:

registerRoute(
  ({url}) => url.pathname.startsWith('/api/'),
  new NetworkFirst({
    cacheName: 'api-cache',
    networkTimeoutSeconds: 5,
    plugins: [
      new ExpirationPlugin({
        maxEntries: 100,
        maxAgeSeconds: 5 * 60, // 5 минут
      }),
    ],
  })
);

Здесь данные API кэшируются на 5 минут, после чего при следующем запросе выполняется сетевой запрос для получения актуальной информации. Стратегия NetworkFirst обеспечивает приоритет обновленных данных при возможности подключения к сети.

4. Особенности и ограничения maxAgeSeconds

  1. Единица измерения — секунды. Для удобства чаще используют выражения типа 7 * 24 * 60 * 60 для недель или 30 * 24 * 60 * 60 для месяца.
  2. Устаревание не приводит к удалению автоматически, пока не будет произведена проверка кэша через следующий запрос. Плагин ExpirationPlugin удаляет старые записи только при добавлении новых или при явной очистке.
  3. Комбинирование с другими плагинами — maxAgeSeconds отлично работает вместе с broadcastUpdate или cacheableResponse, что позволяет контролировать и уведомлять об устаревших ресурсах.
  4. Не заменяет стратегию обновления данных — даже с большим maxAgeSeconds для динамических данных рекомендуется использовать StaleWhileRevalidate или NetworkFirst.

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

  • Для статических ресурсов (изображения, шрифты) использовать длительный срок хранения, например 30–60 дней.
  • Для динамических API-запросов — короткий срок, несколько минут, чтобы данные не устаревали.
  • Совмещать maxAgeSeconds и maxEntries для предотвращения переполнения кэша на устройствах с ограниченной памятью.
  • Регулярно проверять кэш через инструменты разработчика браузера, чтобы убедиться, что устаревшие ресурсы корректно удаляются.

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

Оглавление