workbox-expiration

Cache Expiration

This feature allows you to set expiration parameters for cached responses. In the code sample, a cache-first strategy is used for requests to 'https://example.com', with a maximum of 60 entries and a maximum age of 30 days before the cached entries are purged.

workbox.routing.registerRoute(
  ({url}) => url.origin === 'https://example.com',
  new workbox.strategies.CacheFirst({
    cacheName: 'images',
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 60,
        maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
      }),
    ],
  }),
);

Cache Entry Limit

This feature limits the number of entries in a cache. In the code sample, a stale-while-revalidate strategy is used for requests to 'https://example.com', with a maximum of 50 entries in the 'articles' cache.

workbox.routing.registerRoute(
  ({url}) => url.origin === 'https://example.com',
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: 'articles',
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 50,
      }),
    ],
  }),
);

Purge on Quota Error

This feature automatically purges caches if the browser's storage quota is exceeded. In the code sample, a network-first strategy is used for requests to 'https://example.com', with the 'purgeOnQuotaError' option set to true.

workbox.routing.registerRoute(
  ({url}) => url.origin === 'https://example.com',
  new workbox.strategies.NetworkFirst({
    cacheName: 'documents',
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        purgeOnQuotaError: true, // Automatically delete caches if quota is exceeded
      }),
    ],
  }),
);