workbox-cacheable-response

What is workbox-cacheable-response?

The workbox-cacheable-response npm package is part of the Workbox suite of libraries, which are designed to make it easier to build high-performance web applications with offline capabilities. This particular package provides tools to determine whether responses are cacheable based on certain criteria, such as status codes or headers. It's useful for service workers where you want to ensure that only certain responses are cached.

What are workbox-cacheable-response's main functionalities?

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'
        }
      })
    ]
  })
);

Other packages similar to workbox-cacheable-response

sw-toolbox

sw-toolbox is a predecessor to Workbox, offering similar functionalities for caching strategies in service workers. While it provides tools for dynamic caching and runtime caching, it has been deprecated in favor of Workbox, which offers a more modular and flexible approach to building service workers.

sw-precache

sw-precache is another tool that was commonly used before Workbox for generating service worker files that precache resources. It focuses on static asset caching. Compared to workbox-cacheable-response, sw-precache is less flexible in terms of defining cacheable responses based on runtime conditions like status codes or headers.

README

This module's documentation can be found at https://developers.google.com/web/tools/workbox/modules/workbox-cacheable-response