Workbox Examples: workbox-routing

that's handled by an Express-style route that matches the domain.

that's handled by an RegExp route that matches the .json extension.

that's handled by the router's default handler.

that's handled by the router's catch handler.

Messages

See more details by opening your browser's Developer Tools.

Explore the Code

JavaScript for Service Worker
importScripts('https://unpkg.com/workbox-routing@0.0.2/build/importScripts/workbox-routing.dev.v0.0.2.js');

const router = new workbox.routing.Router();

// This route uses Express-style path matching.
// Because we're using a path that starts with with 'https', it will also match
// cross-origin requests.
const crossOriginExpressRoute = new workbox.routing.ExpressRoute({
  path: 'https://httpbin.org/(.*)',
  handler: ({event}) => {
    console.log('Routed through the httpbin.org handler.');
    return fetch(event.request);
  },
});

// This route uses RegExp matching.
// If the RegExp matches any part of the request URL, then the route will be
// triggered.
const localRegExpRoute = new workbox.routing.RegExpRoute({
  regExp: /\.json$/,
  handler: ({event}) => {
    console.log('Routed through the /\.json$/ handler.');
    return fetch(event.request);
  },
});

// The routes are not active until we register them.
router.registerRoutes({
  routes: [crossOriginExpressRoute, localRegExpRoute],
});

// You can also create an optional default handler that can respond to requests
// that don't match anything.
// If you don't create a default handler, then requests that don't match will
// just be passed along to the network without service worker involvement.
router.setDefaultHandler({
  handler: ({event}) => {
    console.log('Routed through the default handler.');
    return fetch(event.request);
  },
});

// Finally, you can create an optional "catch" handler that will be triggered
// whenever there's an exception thrown that prevents a handler from
// responding. It gives you a chance to provide a generic response.
router.setCatchHandler({
  handler: () => {
    console.log('Routed through the catch handler.');
    return new Response('Catch handler response.');
  },
});

/**
 * This is boilerplate, instructing the service worker to take control as soon
 * as it can.
 */
self.addEventListener('install', () => self.skipWaiting());
self.addEventListener('activate', () => self.clients.claim());
JavaScript for this Page
const buttons = document.querySelectorAll('button');
for (const button of [...buttons]) {
  button.addEventListener('click', async () => {
    const url = button.dataset.url;
    window.log('info', `Requesting ${url}...`);
    try {
      await fetch(button.dataset.url);
      window.log('info', '...request complete.')
    } catch (error) {
      window.log('warn', `...fetch failed due to '${error}'.`);
    }
  });
}