Выбор стратегии под тип ресурса

HTML-страницы представляют собой динамический контент, который часто обновляется. При выборе стратегии для HTML важно учитывать частоту изменений и необходимость мгновенной загрузки при оффлайн-доступе. В Workbox чаще всего используют стратегию Network First, так как она сначала пытается получить актуальный контент с сети, а только при её недоступности возвращает кэшированную версию.

workbox.routing.registerRoute(
  ({request}) => request.mode === 'navigate',
  new workbox.strategies.NetworkFirst({
    cacheName: 'html-pages',
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 50,
        maxAgeSeconds: 24 * 60 * 60, // 1 день
      }),
    ],
  })
);

Особенности стратегии Network First для HTML:

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

Кэширование CSS и JavaScript

CSS и JS-файлы меняются реже, чем HTML. Для них лучше подходят стратегии с упором на кэш, такие как Stale While Revalidate или Cache First с версионированием файлов.

workbox.routing.registerRoute(
  ({request}) => request.destination === 'script' || request.destination === 'style',
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: 'static-resources',
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 100,
        maxAgeSeconds: 7 * 24 * 60 * 60, // 1 неделя
      }),
    ],
  })
);

Преимущества Stale While Revalidate:

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

Кэширование изображений

Изображения занимают значительный объём данных, поэтому правильная стратегия кэширования критична. Чаще всего используют Cache First с лимитом на количество элементов и временем хранения.

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

Особенности Cache First для изображений:

  • Минимизирует повторные сетевые запросы.
  • Уменьшает задержку загрузки страницы при повторных посещениях.
  • Контролируемое удаление старых изображений предотвращает переполнение хранилища.

Кэширование API-запросов

Динамические данные, получаемые через API, требуют комбинированного подхода. Workbox поддерживает Network First и Stale While Revalidate в зависимости от требований к свежести данных.

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

Рекомендации для API:

  • Network First с таймаутом: возвращает данные из кэша, если сеть медленная или отсутствует.
  • Stale While Revalidate: позволяет показывать старые данные мгновенно и обновлять их в фоне.
  • Контроль старения: устанавливает разумное время хранения для свежих данных.

Кэширование шрифтов

Шрифты редко обновляются, поэтому для них оптимальна стратегия Cache First с длительным сроком хранения.

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

Преимущества Cache First для шрифтов:

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

Выбор стратегии по принципу приоритетности

  1. Network First: для контента, который должен быть максимально свежим (HTML, API).
  2. Stale While Revalidate: для часто используемых ресурсов, где приемлема незначительная задержка обновления (CSS, JS).
  3. Cache First: для редко обновляемого контента, который нужно быстро загружать (изображения, шрифты).

Ключевые моменты при настройке кэша в Workbox:

  • Использование плагинов ExpirationPlugin и CacheableResponsePlugin для контроля размера и условий кэширования.
  • Разделение ресурсов по типам и назначение уникальных имен кэшей.
  • Настройка политики обновления кэша в зависимости от критичности данных.

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

Оглавление