Просмотр и очистка кэша вручную

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

Доступ к кэшу

Все данные кэша доступны через стандартный Cache API, который поддерживается в сервис-воркерах. Sw-precache создаёт кэш с уникальным именем, зависящим от версии приложения, обычно вида:

const CACHE_NAME = 'my-app-cache-v1';

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

caches.open(CACHE_NAME).then(function(cache) {
  // Работа с кэшем
});

Просмотр содержимого кэша

Чтобы увидеть, какие ресурсы закэшированы, используется метод cache.keys(). Он возвращает массив объектов Request, которые можно анализировать:

caches.open(CACHE_NAME).then(function(cache) {
  return cache.keys();
}).then(function(requests) {
  requests.forEach(function(request) {
    console.log('Закэшированный URL:', request.url);
  });
});

Особенности:

  • cache.keys() возвращает только запросы, добавленные в конкретный кэш.
  • Для просмотра нескольких кэшей сначала необходимо получить список всех кэшей через caches.keys(), а затем открыть каждый по имени.

Пример полного перебора всех кэшей:

caches.keys().then(function(cacheNames) {
  cacheNames.forEach(function(name) {
    caches.open(name).then(function(cache) {
      cache.keys().then(function(requests) {
        console.log('Содержимое кэша', name);
        requests.forEach(req => console.log(req.url));
      });
    });
  });
});

Очистка кэша

Удаление кэша полностью выполняется методом caches.delete(cacheName). Это позволяет избавиться от устаревших версий ресурсов и освободить место в браузере:

caches.delete(CACHE_NAME).then(function(success) {
  if (success) {
    console.log('Кэш удален:', CACHE_NAME);
  } else {
    console.log('Кэш не найден:', CACHE_NAME);
  }
});

Выборочная очистка:

Для удаления конкретного ресурса из кэша используется метод cache.delete(request):

caches.open(CACHE_NAME).then(function(cache) {
  cache.delete('/styles/main.css').then(function(success) {
    console.log(success ? 'Файл удален' : 'Файл не найден');
  });
});

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

Обновление кэша вручную

Sw-precache создаёт статический манифест файлов, однако иногда необходимо подтянуть новые версии ресурсов без изменения имени кэша. Для этого:

  1. Открыть кэш через caches.open().
  2. Использовать cache.put(request, response) для замены устаревшего ресурса.

Пример замены ресурса:

fetch('/scripts/app.js').then(function(response) {
  caches.open(CACHE_NAME).then(function(cache) {
    cache.put('/scripts/app.js', response.clone());
  });
});

Важно: response.clone() необходим, так как объект Response можно использовать только один раз.

Программная проверка устаревших кэшей

Для автоматизации очистки старых версий полезно хранить актуальное имя кэша и сравнивать его с существующими:

const CURRENT_CACHE = 'my-app-cache-v2';

caches.keys().then(function(cacheNames) {
  cacheNames.forEach(function(name) {
    if (name !== CURRENT_CACHE) {
      caches.delete(name).then(() => {
        console.log('Удален устаревший кэш:', name);
      });
    }
  });
});

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

Инструменты для отладки

Для просмотра и очистки кэшей вручную в браузере можно использовать:

  • Chrome DevTools → Application → Cache Storage Позволяет визуально просматривать все кэши, удалять отдельные записи или очищать весь кэш.

  • Service Worker API в консоли В консоли DevTools можно выполнять JavaScript-код для интерактивного управления кэшем.

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

  • Хранить версию кэша в константе, чтобы легко обновлять при выпуске новой версии приложения.
  • Перед удалением старого кэша убедиться, что пользователи не потеряют важные данные.
  • При ручном обновлении ресурсов использовать response.clone(), чтобы избежать ошибок повторного использования объекта Response.
  • Планировать очистку кэша в фазе активации сервис-воркера (self.onactivate) для автоматического удаления устаревших кэшей.

Просмотр и очистка кэша вручную в Sw-precache позволяет полностью контролировать хранение статических ресурсов, обеспечивая актуальность данных и эффективное использование памяти браузера.

Оглавление