workbox-routing

Registering a route

This code registers a route that intercepts requests for images and applies a cache-first strategy, meaning it will serve the images from the cache if available, otherwise it will fetch them from the network and cache them for future use.

workbox.routing.registerRoute(
  ({request}) => request.destination === 'image',
  new workbox.strategies.CacheFirst()
);

Using a custom handler

This code registers a route for requests to an API endpoint. It uses a custom handler to fetch the request from the network and provides an offline fallback response in case the network request fails.

workbox.routing.registerRoute(
  ({url}) => url.pathname.startsWith('/api/'),
  async ({event}) => {
    try {
      return await fetch(event.request);
    } catch (error) {
      return new Response('Offline fallback', { status: 200 });
    }
  }
);

Navigation route

This code registers a navigation route that serves an app shell HTML file for navigation requests, which is useful for single-page applications that want to ensure an app shell is returned for navigational requests.

workbox.routing.registerNavigationRoute(
  workbox.precaching.getCacheKeyForURL('/app-shell.html')
);