Workbox

Workbox is a collection of libraries and build tools that make it easy to store your website’s files locally, on your users’ devices. Consider Workbox if you want to:

  • Make your site work offline.
  • Improve load performance on repeat-visits. Even if you don’t want to go fully-offline, you can use Workbox to store and serve common files locally, rather than from the network.

Learn more

Get Started

Choose your build tool to get started:

Install Workbox's Webpack plugin Install Workbox to work with Gulp Install Workbox to work with NPM Scripts

Not using a build tool?

Install our command-line interface:

$ npm install workbox-cli --global

# Generate a service worker with some smart defaults
$ workbox generate:sw

Want to work directly in your service worker?

We support that too with workbox-sw.

$ npm install --save workbox-sw

Then reference the file from your service worker:

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

Features

Easy precaching

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

const workboxSW = new WorkboxSW();
workboxSW.precache([
  {
    url: '/index.html',
    revision: 'bb121c',
  }, {
    url: '/styles/main.css',
    revision: 'acd123',
  }, {
    url: '/scripts/main.js',
    revision: 'a32caa',
  }
]);

Comprehensive caching strategies

const workboxSW = new WorkboxSW();
const networkFirst = workboxSW.strategies.networkFirst();
workboxSW.router.registerRoute('/schedule', networkFirst);
  • Cache only
  • Cache first, falling back to network
  • Cache, with network update
  • Network only
  • Network first, falling back to cache

Powerful debugging support

Example of Workbox Logging.

The next version of sw-precache & sw-toolbox

Workbox is a rethink of our previous service worker libraries with a focus on modularity. It aims to reduce friction with a unified interface, while keeping the overall library size small. Same great features, easier to use and cross-browser compatible.

Workbox: Flexible PWA Libraries @ Chrome Dev Summit 2017

In this talk, Jeff Posnick gives an overview of Workbox's support for caching strategies, precaching, and handling navigation requests. It's filled throughout with real-world examples of how companies like Pinterest and WIRED are using Workbox in production.