Удаление устаревших записей precache

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

Механизм версионирования precache

Каждый ресурс в precache идентифицируется уникальным revision. Этот параметр обычно представляет собой хеш содержимого файла или метку версии:

import { precacheAndRoute } from 'workbox-precaching';

precacheAndRoute([
  { url: '/index.html', revision: '123456' },
  { url: '/styles/main.css', revision: 'abcdef' },
]);

Если содержимое файла изменяется, генерация нового хеша или изменение ревизии заставляет Workbox рассматривать новую версию ресурса как отдельную, а устаревшую — как подлежащую удалению при следующей активации сервис-воркера.

Автоматическое удаление устаревших ресурсов

Workbox автоматически управляет устаревшими записями precache. При установке нового сервис-воркера происходит проверка списка ресурсов:

  1. Установка сервис-воркера (install): новые ресурсы скачиваются и добавляются в кеш с заданной ревизией.
  2. Активация сервис-воркера (activate): Workbox сравнивает текущий кеш с новым манифестом precache. Все ресурсы, которые отсутствуют в новом списке или имеют изменённую ревизию, удаляются из кеша.

Пример явной установки и активации с автоматическим удалением устаревшего кеша:

import { precacheAndRoute, cleanupOutdatedCaches } from 'workbox-precaching';

// Добавление ресурсов в precache
precacheAndRoute([
  { url: '/index.html', revision: '123456' },
  { url: '/styles/main.css', revision: 'abcdef' },
]);

// Удаление устаревших ресурсов
cleanupOutdatedCaches();

Функция cleanupOutdatedCaches проверяет кеш, созданный предыдущими версиями сервис-воркера, и удаляет файлы, которых нет в текущем списке precache.

Настройка удаления устаревших ресурсов

Workbox позволяет настраивать поведение при удалении устаревших записей:

  • Периодическое удаление: ресурсы удаляются только при активации нового сервис-воркера. Это предотвращает удаление во время работы старой версии приложения.
  • Контроль версий кеша: можно явно задать имя кеша и политику версионирования, чтобы минимизировать конфликты:
import { precacheAndRoute } from 'workbox-precaching';

precacheAndRoute([
  { url: '/app.js', revision: '1.0.0' },
  { url: '/vendor.js', revision: '2.3.1' },
], {
  cacheId: 'my-app-cache',
  directoryIndex: '/',
  cleanURLs: true
});

Логирование и отладка устаревших кешей

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

self.addEventListener('activate', (event) => {
  event.waitUntil(
    (async () => {
      const cacheNames = await caches.keys();
      console.log('Текущие кеши:', cacheNames);
    })()
  );
});

Это позволяет убедиться, что устаревшие кеши действительно удаляются и не накапливаются лишние данные.

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

  • Всегда использовать уникальные revision для ресурсов, которые могут изменяться. Это гарантирует правильное удаление старых версий.
  • Использовать cleanupOutdatedCaches в паре с precacheAndRoute для автоматического поддержания актуальности кеша.
  • Для больших проектов рекомендуется явно управлять кешами через cacheId и структурировать precache, чтобы избежать конфликтов между разными версиями сервис-воркеров.
  • Проверять работу удаления устаревших ресурсов через инструменты разработчика браузера, чтобы убедиться в корректности работы offline-режима и обновлений.

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

Оглавление