JavaScript Libraries for adding offline support to web apps

Get Started

Welcome, Workbox is a set of libraries and Node modules that make it easy to cache assets and take full advantage of features used to build Progressive Web Apps.
Performance Icon

Performance

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

Resilience

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

Progressive Web App Logo

Enhancement

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
  • Greater flexibility and feature set than sw-precache and sw-toolbox

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.

 workbox.routing.registerRoute(
  new RegExp('https://fonts.(?:googleapis|gstatic).com/(.*)'),
  workbox.strategies.cacheFirst({
    cacheName: 'google-fonts',
    plugins: [
      new workbox.cacheableResponse.Plugin({
        statuses: [0, 200],
      }),
    ],
  }),
); 

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.

 workbox.routing.registerRoute(
  /\.(?:js|css)$/,
  workbox.strategies.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.

 workbox.routing.registerRoute(
  /\.(?:png|gif|jpg|jpeg|svg)$/,
  workbox.strategies.cacheFirst({
    cacheName: 'images',
    plugins: [
      new workbox.expiration.Plugin({
        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.

CLI
workbox wizard
Node Module
const workboxBuild = require('workbox-build');
workboxBuild.generateSW({
  swDest: './build/sw.js'
  globDirectory: './app',
  globPatterns: '**\/*.{js,css,html,png}',
});
webpack
const WorkboxPlugin = require('workbox-webpack-plugin');

// webpack config
{
  plugins: [
    // Other webpack plugins...
    new WorkboxPlugin()
  ]
}

Offline Google Analytics

Want offline analytics for your offline PWA? No problem.

 workbox.googleAnalytics.initialize(); 

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 like Pinterest and WIRED are using Workbox in production.

Who's Using Workbox?

Wired Logo
Pinterest Logo
Starbucks Logo
Forbes Logo
iHeart Radio Logo
Tinder Logo

Learn how to use Workbox

Get Started

Contributors

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