workbox-routing

What is workbox-routing?

The workbox-routing package is part of the Workbox suite of libraries, which are designed to make it easier to build offline-first Progressive Web Apps (PWAs). The workbox-routing module provides tools to intercept network requests and determine how they should be handled, such as serving them from a cache or fetching a response from the network.

What are workbox-routing's main functionalities?

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

Other packages similar to workbox-routing

sw-toolbox

sw-toolbox is a legacy library that was a precursor to Workbox. It offers similar functionalities for caching and serving content in service workers. However, Workbox has since superseded sw-toolbox with more features and improvements.

sw-precache

sw-precache is another legacy library that integrates with build processes to generate a service worker that precaches resources. It has been deprecated in favor of Workbox, which provides a more modular and flexible approach to service worker strategies.

README

workbox-routing

A service worker helper library to route request URLs to handlers.

Installation

npm install --save-dev workbox-routing

Documentation

Read more at this module's documentation page.

Sample Code and Examples

View the live example to see this module put to use.

What's Workbox?

This module is a part of Workbox, which is a collection of JavaScript libraries for Progressive Web Apps.

Visit https://workboxjs.org/ to learn more about what Workbox can do for you.