It's a wrap for Chrome Dev Summit 2020! Watch all the sessions at now!

Workbox Core

What is Workbox Core?

Workbox has been built to be modular, allowing developers to select the pieces they want to use without forcing them to download everything in a single file.

There is however overlap between modules, for example, each module will like need to interact with the console, throw meaningful errors and make use of the network or cache. To avoid each module implementing the same logic, workbox-core contains this common code which each module relies on.

This module does provide some functionality to developers, but beyond log levels and caching, workbox-core offers internal logic to each module, rather than the end developer.

View and Change the Default Cache Names

Workbox defines it's caches via cacheNames:

import {cacheNames} from 'workbox-core';


These cache names are constructed in the format of a prefix, a name and suffix, where the name changes based on the use of the cache.


You can change these default names by altering all or some of the values passed to setCacheNameDetails().

import {cacheNames, setCacheNameDetails} from 'workbox-core';

  prefix: 'my-app',
  suffix: 'v1',
  precache: 'install-time',
  runtime: 'run-time',
  googleAnalytics: 'ga',

// Will print 'my-app-install-time-v1'

// Will print 'my-app-run-time-v1'

// Will print 'my-app-ga-v1'

The main use case for the prefix and suffix is that if you use Workbox for multiple projects and use the same localhost port for each project, setting a custom prefix for each module will prevent the caches from conflicting with each other.

Skip Waiting and Clients Claim

Some developers want to be able to publish a new service worker and have it update and control a web page as soon as possible, skipping the default service worker lifecycle.

If you find yourself wanting this behavior, workbox-core provides some helper methods to make this easy:

import {skipWaiting, clientsClaim} from 'workbox-core';