Common Recipes

This page contains a set of example caching strategies you can use with Workbox.

Google Fonts

You can use a cache first strategy to cache the Google Fonts in your page. Here we've limited the cache to 30 entries to ensure we don't balloon a users device.

workbox.routing.registerRoute(
  new RegExp('https://fonts.googleapis.com/(.*)'),
  workbox.strategies.cacheFirst({
    cacheName: 'googleapis',
    plugins: [
      new workbox.expiration.Plugin({
        maxEntries: 30,
      }),
    ],
  }),
);

Caching Images

You can capture and caching images with a cache first strategy based on the extension.

workbox.routing.registerRoute(
  /\.(?:png|gif|jpg|jpeg|svg)$/,
  workbox.strategies.cacheFirst({
    cacheName: 'images',
    plugins: [
      new workbox.expiration.Plugin({
        maxEntries: 60,
        maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
      }),
    ],
  }),
);

Cache CSS and JavaScript Files

You can use a stale while revalidate for CSS and JavaScript files that aren't precached.

workbox.routing.registerRoute(
  /\.(?:js|css)$/,
  workbox.strategies.staleWhileRevalidate({
    cacheName: 'static-resources',
  }),
);

Caching Content from Multiple Origins

You can create regular expressions to cache similar requests from multiple origins in a single route. For example, you can cache assets from origins like googleapis.com and gstatic.com with a single route.

workbox.routing.registerRoute(
  /.*(?:googleapis|gstatic)\.com.*$/,
  workbox.strategies.staleWhileRevalidate(),
);

An alternative to the above example is to cache the origins separately to store assets in cache for each origin.

workbox.routing.registerRoute(
  /.*(?:googleapis)\.com.*$/,
  workbox.strategies.staleWhileRevalidate({
    cacheName: 'googleapis',
  }),
);

workbox.routing.registerRoute(
  /.*(?:gstatic)\.com.*$/,
  workbox.strategies.staleWhileRevalidate({
    cacheName: 'gstatic',
  }),
);

Restrict Caches for a Specific Origin

You can cache assets for a specific origin and apply expiration rules on that cache. For example, the example below caches up to 50 requests for up to 5 minutes.

workbox.routing.registerRoute(
    'https://hacker-news.firebaseio.com/v0/*',
    workbox.strategies.cacheFirst({
        cacheName: 'stories',
        plugins: [
          new workbox.expiration.Plugin({
            maxEntries: 50,
            maxAgeSeconds: 5 * 60, // 5 minutes
          }),
          new workbox.cacheableResponse.Plugin({
            statuses: [0, 200],
          }),
        ],
    }),
);

Force a Timeout on Network Requests

There may be network requests that would be beneficial if they were served from the network, but could benefit by being served by the cache if the network request is taking too long.

For this, you can use a NetworkFirst strategy with the networkTimetoutSeconds option configured.

workbox.routing.registerRoute(
    'https://hacker-news.firebaseio.com/v0/*',
    workbox.strategies.networkFirst({
        networkTimetoutSeconds: 3,
        cacheName: 'stories',
        plugins: [
          new workbox.expiration.Plugin({
            maxEntries: 50,
            maxAgeSeconds: 5 * 60, // 5 minutes
          }),
        ],
    }),
);

Cache Resources from a Specific Subdirectory

You can use a regular expression to easily route requests to files in a specific directory. If we wanted to route requests to files in /static/, we could use the regular expression new RegExp('/static/.*/'), like so:

workbox.routing.registerRoute(
  new RegExp('/static/(.*)'),
  workbox.strategies.staleWhileRevalidate(),
);