This is the legacy Workbox site. Visit the new docs.
Welcome! Workbox is a set of libraries that can power a production-ready service worker for your Progressive Web App.
Performance Icon


Stop waiting on the network! You can improve your web app's performance by caching and serving your files, powered by a service worker.

No Network Icon


Even on an unreliable connection, your web app can still work using the right runtime caching strategies.

Progressive Web App Logo


Looking to build a progressive web app? Workbox makes it easy to create an offline first experience.

Why Workbox?

Workbox is a library that bakes in a set of best practices and removes the boilerplate every developer writes when working with service workers.

  • Precaching
  • Runtime caching
  • Strategies
  • Request routing
  • Background sync
  • Helpful debugging

What's the API Like?

Below are a few examples of the Workbox API demonstrating some of the common approaches developers take in their service workers.

Cache Google Fonts

Wish you could rely on Google Fonts being available offline after the user has visited your site? Add a quick rule to serve them from the cache.

  import {ExpirationPlugin} from 'workbox-expiration';
  import {registerRoute} from 'workbox-routing';
  import {StaleWhileRevalidate} from 'workbox-strategies';

  // Cache Google Fonts with a stale-while-revalidate strategy, with
  // a maximum number of entries.
    ({url}) => url.origin === '' ||
               url.origin === '',
    new StaleWhileRevalidate({
      cacheName: 'google-fonts',
      plugins: [
        new ExpirationPlugin({maxEntries: 20}),

Cache JavaScript and CSS

Make your JS and CSS ⚡ fast by returning the assets from the cache, while making sure they are updated in the background for the next use.

  import {registerRoute} from 'workbox-routing';
  import {StaleWhileRevalidate} from 'workbox-strategies';

    ({request}) => request.destination === 'script' ||
                   request.destination === 'style',
    new StaleWhileRevalidate()

Cache Images

Images carry most of the weight for a web page. Use this rule to serve them quickly from the cache, while making sure you don’t cache them indefinitely, consuming your users' storage.

  import {CacheableResponsePlugin} from 'workbox-cacheable-response';
  import {CacheFirst} from 'workbox-strategies';
  import {ExpirationPlugin} from 'workbox-expiration';
  import {registerRoute} from 'workbox-routing';

    ({request}) => request.destination === 'image',
    new CacheFirst({
      cacheName: 'images',
      plugins: [
        new CacheableResponsePlugin({
          statuses: [0, 200],
        new ExpirationPlugin({
          maxEntries: 60,
          maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days

Precache your Files

Use Workbox to precache assets in your web app using our CLI, Node module or webpack plugin.

  workbox wizard
Node Module
  const {generateSW} = require('workbox-build');

    swDest: './build/sw.js',
    globDirectory: './app',
    globPatterns: '**/*.{js,css,html,png}',
  const {GenerateSW} = require('workbox-webpack-plugin');

  module.exports = {
    // Other webpack config...
    plugins: [
      // Other plugins...
      new GenerateSW(),

Offline Google Analytics

Want offline analytics for your offline PWA? No problem.

  import * as googleAnalytics from 'workbox-google-analytics';


Workbox @ Chrome Dev Summit

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 are using Workbox in production.


Workbox is built and maintained by a friendly bunch of contributors, without whom none of this would be possible.