Именование кэшей

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

Основные принципы именования

1. Уникальность имени кэша

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

<имя-приложения>-<тип-ресурсов>-v<версия>

Примеры:

  • myapp-images-v1
  • myapp-scripts-v2
  • myapp-styles-v3

Использование версии (v1, v2 и т.д.) обеспечивает контроль над обновлениями ресурсов и позволяет безопасно удалять устаревшие кэши.

2. Разделение по типам ресурсов

Для оптимальной работы рекомендуется создавать отдельные кэши для разных типов ресурсов:

  • Скрипты и библиотеки (scripts)
  • Стили (styles)
  • Изображения и медиа (images, media)
  • Данные API (api-data)

Разделение позволяет применять различные стратегии кэширования (например, CacheFirst для изображений и NetworkFirst для данных API) без риска переполнения одного кэша.

Практика версионирования

Версионирование кэшей является ключевым инструментом для контроля их обновления. Существует несколько стратегий:

  • Мажорная версия: меняется при глобальных изменениях приложения. Например, при полной переработке фронтенда.
  • Минорная версия: используется для локальных изменений ресурсов без изменения логики приложения.
  • Хэширование содержимого: вместо ручного увеличения версии можно использовать хэш файлов (например, scripts-abcdef1234), что гарантирует уникальность кэша при любом изменении ресурса.

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

Настройка кэшей в Workbox

Workbox предоставляет несколько способов задавать имена кэшей:

  1. Через workbox.routing.registerRoute:
workbox.routing.registerRoute(
  ({request}) => request.destination === 'image',
  new workbox.strategies.CacheFirst({
    cacheName: 'myapp-images-v1',
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 50,
        maxAgeSeconds: 30 * 24 * 60 * 60, // 30 дней
      }),
    ],
  })
);
  1. Использование workbox.precaching.precacheAndRoute для статических ресурсов:
workbox.precaching.precacheAndRoute([
  {url: '/index.html', revision: '123456'},
  {url: '/styles/main.css', revision: 'abcdef'}
], {
  cacheName: 'myapp-static-v1'
});

В этом случае cacheName определяет общий кэш для всех предзагруженных ресурсов. Обновление версии кэша приводит к автоматической очистке старого кэша.

Очистка устаревших кэшей

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

workbox.core.cleanupOutdatedCaches();

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

Рекомендации по именованию

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

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

Оглавление