workbox-cacheable-response

Caching responses based on status codes

This feature allows you to cache responses based on their HTTP status codes. In the code sample, only responses with status codes of 0 (opaque responses) or 200 (OK) are cached. This is particularly useful for caching successful responses or handling CORS requests in service workers.

workbox.routing.registerRoute(
  ({request}) => request.destination === 'image',
  new workbox.strategies.CacheFirst({
    cacheName: 'images',
    plugins: [
      new workbox.cacheableResponse.CacheableResponsePlugin({
        statuses: [0, 200]
      })
    ]
  })
);

Caching responses based on headers

This feature enables caching of responses based on specific header values. In the example, only responses with a header 'X-Is-Cacheable' set to 'true' are considered cacheable. This allows for more granular control over what gets cached, based on server response headers.

workbox.routing.registerRoute(
  ({request}) => request.destination === 'document',
  new workbox.strategies.NetworkFirst({
    cacheName: 'documents',
    plugins: [
      new workbox.cacheableResponse.CacheableResponsePlugin({
        headers: {
          'X-Is-Cacheable': 'true'
        }
      })
    ]
  })
);