Ручная очистка кэша

Работа с кэшированием в Workbox обычно автоматизирована с помощью стратегий, таких как CacheFirst или StaleWhileRevalidate. Однако в ряде случаев требуется ручное управление кэшем, включая его очистку или удаление устаревших версий. Workbox предоставляет для этого удобный API, позволяющий безопасно и контролируемо управлять кэшами.

Основные методы очистки кэша

В Workbox есть несколько ключевых методов для работы с кэшами:

  1. caches.delete(cacheName) Стандартный метод Cache API для удаления кэша по имени. Возвращает промис, который резолвится в true, если кэш успешно удалён, и в false, если кэш не найден.

    caches.delete('my-cache-v1').then((success) => {
  if (success) {
    console.log('Кэш удалён');
  } else {
    console.log('Кэш не найден');
  }
});

  2. workbox.precaching.cleanupOutdatedCaches() Специализированная функция Workbox, автоматически удаляющая устаревшие версии кэшей, созданные через workbox-precaching. Она работает по принципу сравнения текущего манифеста с уже существующими кэшами.

    import { cleanupOutdatedCaches } from 'workbox-precaching';

cleanupOutdatedCaches();

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

  3. Удаление отдельных ресурсов из кэша Если нужно удалить только конкретные URL, можно использовать методы Cache API напрямую:

    caches.open('my-cache-v1').then((cache) => {
  cache.delete('/old-resource.js').then((deleted) => {
    console.log(deleted ? 'Ресурс удалён' : 'Ресурс не найден');
  });
});

Управление кэшами по стратегиям Workbox

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

  • CacheFirst и NetworkFirst создают кэши с именами вида workbox-runtime-<hash> или с кастомным именем, если указано.

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

    caches.keys().then((cacheNames) => {
  cacheNames.forEach((cacheName) => {
    if (cacheName.startsWith('workbox-runtime-')) {
      caches.delete(cacheName);
    }
  });
});

Контроль размера кэша

Даже после ручной очистки старых версий ресурсов может потребоваться ограничить объём кэша. Workbox предоставляет ExpirationPlugin, который автоматически удаляет старые записи по количеству или возрасту:

import { CacheFirst } from 'workbox-strategies';
import { ExpirationPlugin } from 'workbox-expiration';

const cacheFirstStrategy = new CacheFirst({
  cacheName: 'images-cache',
  plugins: [
    new ExpirationPlugin({
      maxEntries: 50, // максимум 50 ресурсов
      maxAgeSeconds: 7 * 24 * 60 * 60, // 7 дней
    }),
  ],
});

Сочетание ручной очистки и ExpirationPlugin обеспечивает полный контроль над размером кэшей и их актуальностью.

Очистка кэша при обновлении сервис-воркера

Часто возникает необходимость очистки кэша при обновлении сервис-воркера. Для этого используется событие activate:

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

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

Вывод

Ручная очистка кэша в Workbox — это инструмент точечного управления ресурсами, позволяющий:

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

Комбинация методов Workbox и стандартного Cache API обеспечивает гибкость и безопасность при управлении кэшами.

Оглавление