Chrome Dev Summit 2020 is back & going virtual on December 9-10. Learn more

Precache Files

If you want your web app to work offline or there are assets you know can be cached for a long time, precaching is the best approach.

Precaching a file will ensure that a file is downloaded and cached before a service worker is installed, meaning that if your service worker is installed, your files are cached.

Workbox provides an easy way to precache files, ensuring that as your service worker changes, the precached files are maintained efficiently, only downloading updated files and cleaning up after the service worker is made redundant.

The most common way to precache files with Workbox is to call the precacheAndRoute method and pass it a list of URLs along with their revision information:

import {precacheAndRoute} from 'workbox-precaching';

  {url: '/index.html', revision: '383676' },
  {url: '/styles/app.0c9a31.css', revision: null},
  {url: '/scripts/app.0d5770.js', revision: null},

The above code will download the files /styles/app.0c9a31.css, /scripts/app.0d5770.js and /index.html during the service worker install event and create a route that serves these files directly from the cache.

Notice that the CSS and JS file set their revision property to null. This is because these files have revision information in the filenames themselves.

This list of files is normally generated using a tool that manages the versioning of files. The next sections lists the tools the Workbox provides.

Generating a Precache Manifest

Most users of Workbox will generate the list of files to precache by using one of the following Workbox tools, although you can use any tool that outputs files with revisioning. Below is a list of tools that can generate this list of files.

Workbox Command Line Interface (CLI)

Ideal for developers who are unfamiliar with Node or have simple needs.

Learn how to use the CLI

workbox Build

Perfect for developers wanting to programmatically build the list in Node or are using Gulp for their build process.

Learn how to use workbox-build

Workbox Webpack Plugin

Ideal for developers using webpack to build their project.

Learn how to use the Webpack Plugin