workbox-sw

A high-level library that makes it easier to precache assets and configure routes with caching strategies in a service worker.

Examples

Adding the Library to your service worker.

importScripts('/node_modules/build/importScripts/workbox-sw.prod.vX.Y.Z.js');

Caching assets and registering routes.

// DO NOT CREATE THIS MANIFEST OR EDIT IT MANUALLY!!
// Use workbox-build or workbox-cli to generate the manifest for you.
const workboxSW = new WorkboxSW();
workboxSW.precache([
  {
    url: '/',
    revision: '613e6c7332dd83e848a8b00c403827ed'
  },
  {
    url: '/styles/main.css',
    revision: '59a325f32baad11bd47a8c515ec44ae5'
  }
]);

// Register runtime routes like so.
workboxSW.router.registerRoute(
  '/example/', workboxSW.staleWhileRevalidate());
workboxSW.router.registerRoute(
  /\/images\/(.*\/)?.*\.(png|jpg|jpeg|gif)/,
  workboxSW.strategies.cacheFirst());
workboxSW.router.registerRoute(
  '/styles/:filename', workboxSW.strategies.cacheFirst());

Using plugins with caching strategies.

const workboxSW = new WorkboxSW();
workboxSW.router.registerRoute(/\/images\/(.*\/)?.*\.(png|jpg|jpeg|gif)/,
  workboxSW.strategies.cacheFirst({
    cacheName: 'example-cache',
    cacheExpiration: {
      maxEntries: 10,
      maxAgeSeconds: 7 * 24 * 60 * 60
    },
    cacheableResponse: {
      statuses: [0, 200]
    },
    broadcastCacheUpdate: {
      channelName: 'example-channel-name'
    },
    plugins: [
      // Additional Plugins
    ]
  })
);

Classes

Router
Strategies
WorkboxSW