Smaller, Easier and More Powerful — Workbox 3.0

https://developers.google.com/web/tools/workbox/

Service worker finally lands on all the modern browsers 🔥[1]. It’s definitely a good time for you start playing around if you haven’t yet done so.

In short, service worker serves as a proxy that enables web application to provide a fast, reliable, and engaging experience. It also progressively enhance your exciting code base which make it even easier to adopt (and will not affect browsers that doesn’t support those features).

As service worker runs in a worker context and different Javascript thread, it could be a bit different than our regular client side Javascript code. Service worker also run asynchronously by design. All service worker runs through Download, Install and Activate lifecycle. If you are interested in service worker lifecycle in detail, Jake Archibald wrote a fantastic blogpost which I highly recommend to take a look.

There are plenty of different ways to generate a service worker file. You can go old school the hand craft the logic, or using some build time tools.

Workbox is a collection of helper Javascript libraries which helps to reduce the time needed utilizing the power of service worker. You might already using Workbox (or sw-precache / sw-toolbox) for your PWA.

The new Workbox 3.0 provides an easier way to create and develop service worker logic.

Caching

The most common use case for service worker is to provide a cache layer such as precaching and runtime caching.

How Workbox handles precache?

Wokrbox will generate a hash of your static resources (such as HTML, CSS, Javascript …etc) build time and generate a service worker file which serves these assets using a cache first strategy.

// Workbox will generate `precache-manifest` for your static content based on your config
self.__precacheManifest = [
  {
    "url": "/build/chunks/chunk-1.js"
  },
  {
    "revision": "5a93cdf09cfbcb942ad1",
    "url": "/build/css-1.css"
  },
  {
    "revision": "5a93cdf09cfbcb942ad1",
    "url": "/build/css-2.css"
  }
];
// Service worker
importScripts(
  '/build/precache-manifest.js',
  'https://storage.googleapis.com/workbox-cdn/releases/3.2.0/workbox-sw.js'// or serve locally
),
workbox.precaching.precacheAndRoute( // precache files
  self.__precacheManifest, 
  /* options */
);

In Workbox 3.0, the smaller size workbox library (only loads libraries on demand runtime) can now be served from Google CDN (previously needs to be served locally).

There are multiple way you could integrate Workbox in your build process, such as via CLI, node module, or even Webpack.

Take Webpack for instance, Workbox v3 makes a change that now the plugin split into GenerateSW and InjectManifest plugin.

GenerateSW plugin is very powerful if you want to do minimal configuration for precaching and route caching while InjectManifest plugin allows you to have more control and logic over service work file (such as web push or more complicate cache strategy).

const { GenerateSW } = require('workbox-webpack-plugin');

module.exports = {
  plugins: [
    new GenerateSW({
      // some config
    })
  ]
}

How Workbox handles runtime cache?

Runtime cache such as API request or third party resources could be done via runtime cache. Workbox will register different routes and apply different cache strategy when route matches.

workbox.routing.registerRoute(
  match,
  handler
);

match could be a String, Regex, or callback function to match routes.

You could easily apply different cache strategy via Workbox such as staleWhileRevalidate (serving stale content while fetching new content).

workbox.routing.registerRoute(
  match,
  workbox.strategies.staleWhileRevalidate()
);

Others

1. Offline experiences: Workbox provides an easy way to perform background data synchronization so that if a network request fails, it will be added to the background sync queue and retry with the next sync event. (Such as workbox.backgroundSync.Plugin or offline Google Analytics).
2. Navigation fallbacks: Workbox also provides the way to config fallback response to different routes
3. Debug: Workbox 3.0 provides a very comprehensive log in console and it is enabled by default for localhost. I found it very helpful to determine the cache strategies to use for certain requests or resources.

[1] https://jakearchibald.github.io/isserviceworkerready/