Параметр cacheId и управление версиями кэша

В sw-precache параметр cacheId служит для уникальной идентификации кэша сервис-воркера. Он используется при генерации имени кэша, что позволяет отличать один кэш от другого при обновлениях приложения. Значение cacheId добавляется к имени кэша, формируя комбинацию вида:

const CACHE_NAME = `${cacheId}-precache-v${version}`;

где version формируется автоматически sw-precache или может быть задан вручную через другие параметры конфигурации, такие как dontCacheBustUrlsMatching.

Назначение cacheId

  1. Изоляция кэшей разных приложений При использовании нескольких приложений на одном домене одинаковые имена файлов могут пересекаться. cacheId обеспечивает уникальность кэша для каждого приложения:

    swPrecache.write('service-worker.js', {
  cacheId: 'my-app',
  staticFileGlobs: ['dist/**.js', 'dist/**.css'],
});

    В этом примере кэш будет иметь имя вида my-app-precache-v1, что предотвращает случайное использование кэша другого проекта.

  2. Управление версиями кэша Любое изменение cacheId приводит к созданию нового кэша. Старый кэш остаётся в браузере до момента его очистки или удаления в коде сервис-воркера через self.caches.delete. Это позволяет контролировать версионирование кэша и безопасно обновлять ресурсы без конфликтов.

Связь с dynamicUrlToDependencies и dontCacheBustUrlsMatching

Параметр cacheId тесно связан с механизмами управления версионностью:

  • dynamicUrlToDependencies: позволяет указывать зависимости для динамических URL. Когда зависимости изменяются, sw-precache автоматически обновляет хэш и формирует новый кэш. cacheId в этом случае помогает различать кэши для разных наборов динамических ресурсов.
  • dontCacheBustUrlsMatching: предотвращает автоматическое добавление хэшей к URL файлов. При этом cacheId становится ключевым элементом для идентификации версии кэша.

Пример конфигурации:

swPrecache.write('service-worker.js', {
  cacheId: 'my-app',
  staticFileGlobs: ['dist/**/*.js', 'dist/**/*.css'],
  dontCacheBustUrlsMatching: /\.\w{8}\./, // не добавлять хэши к файлам с хэшами в имени
  dynamicUrlToDependencies: {
    '/index.html': ['src/index.html', 'src/templates/base.html']
  }
});

Обновление кэша и удаление старых версий

При каждом изменении cacheId или обновлении версий ресурсов нужно контролировать удаление устаревших кэшей. В sw-precache это реализуется автоматически через событие activate сервис-воркера:

self.addEventListener('activate', event => {
  const expectedCacheNames = ['my-app-precache-v2'];
  event.waitUntil(
    caches.keys().then(cacheNames =>
      Promise.all(
        cacheNames.map(cacheName => {
          if (!expectedCacheNames.includes(cacheName)) {
            return caches.delete(cacheName);
          }
        })
      )
    )
  );
});

Этот код удаляет все кэши, которые не соответствуют текущему имени с cacheId, предотвращая засорение хранилища браузера.

Рекомендации по использованию cacheId

  • Использовать короткие, но уникальные идентификаторы для разных приложений на одном домене.
  • Не менять cacheId при незначительных изменениях ресурсов, чтобы не создавать лишние версии кэша.
  • Сочетать cacheId с версионированием файлов (например, через [hash] в сборке Webpack) для полной безопасности обновлений.
  • Проверять в консоли браузера актуальные кэши через caches.keys() при отладке сервис-воркера.

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

Оглавление