workbox-sw.WorkboxSW

class   static
Version     v2.1.3

This class uses the Workbox libraries to create a clean and easy API for common caching and serving needs.

Constructor

WorkboxSW

new WorkboxSW(input)

You should instantiate this class with new self.WorkboxSW().

Parameter

input

Object

Values in input have the following properties:

Parameter

cacheId

Optional

string

Defining a cacheId is useful to ensure uniqueness across cache names. Useful if you have multiple sites served over localhost.

skipWaiting

Optional

boolean

To activate the service worker as soon as the install step has finished set this value to true.

Defaults to false.

clientsClaim

Optional

boolean

To claim currently open clients set this value to true.

Defaults to false.

directoryIndex

Optional

String

The directoryIndex will check cache entries for a URLs ending with '/' to see if there is a hit when appending the directoryIndex (i.e. '/index.html').

ignoreUrlParametersMatching

Optional

Array of RegExp

An array of regex's to remove search params when looking for a cache match.

precacheChannelName

Optional

string

This value will be used as the channelName to construct a BroadcastCacheUpdate plugin. The plugin sends a message whenever a precached URL is updated. To disable this plugin, set precacheChannelName to an empty string.

Defaults to 'precache-updates'

Properties

router

Router

The router for this library is exposed via the router parameter. This is an instance of the Router.

Example 

const workboxSW = new WorkboxSW();
workboxSW.router.registerRoute('/', workboxSW.workbox.cacheFirst());

runtimeCacheName

The name of the cache used by default by the runtime caching strategies.

Entries that are managed via precache() are stored in a separate cache with a different name.

You can override the default cache name when constructing a strategy if you'd prefer, via workboxSW.strategies.cacheFirst({cacheName: 'my-cache-name'});

If you would like to explicitly add to, remove, or check the contents of the default cache, you can use the Cache Storage API to pass in the default cache name to caches.open(). This can be useful if you want to "prime" your cache with remote resources that can't be properly managed via precache().

Example 

const cache = await caches.open(workboxSW.runtimeCacheName);
await cache.add('https://third-party.com/path/to/file');
const contentsOfRuntimeCache = await cache.keys();

strategies

The supported caching strategies shipped with workbox-sw are provided via the strategies object. See Strategies for a complete list.

Example 

const workboxSW = new WorkboxSW();
workboxSW.router.registerRoute('/styles/*',
 workboxSW.strategies.cacheFirst());

Method

precache

precache(revisionedFiles)

Revisioned assets can be cached intelligently during the install (i.e. old files are cleared from the cache, new files are added to the cache and unchanged files are left as is).

The input needs to be an array of URL strings which having revisioning details in them otherwise the entry should be an object with url and revision parameters.

In addition to maintaining the cache, this method will also set up the necessary routes to serve the precached assets using a cache-first strategy.

Parameter

revisionedFiles

Array of (String or Object)

A set of urls to cache when the service worker is installed.

Example

Cache revisioned assets.

// Cache a set of revisioned URLs
const workboxSW = new WorkboxSW();
workboxSW.precache([
    '/styles/main.613e6c7332dd83e848a8b00c403827ed.css',
    '/images/logo.59a325f32baad11bd47a8c515ec44ae5.jpg'
]);

// ...precache() can also take objects to cache
// non-revisioned URLs.
// Please use workbox-build or the workbox CLI to generate the manifest for
// you.
workboxSW.precache([
    {
      url: '/index.html',
      revision: '613e6c7332dd83e848a8b00c403827ed'
    },
    {
      url: '/about.html',
      revision: '59a325f32baad11bd47a8c515ec44ae5'
    }
]);