Activate Service Workers Faster

Service workers are great for many purposes:  speed, offline, cache control, and more.  You can view many code service worker usage samples over at the Service Worker Cookbook, if you're so interested.  One of those recipes, Immediate Claim, is as important and useful as it provides a way to claim your service worker more quickly, meaning you can receive fetch events faster.

You can liken the following code quickening to DOMContentLoaded (commonly known as domready) vs. the old load event -- set processing into motion more quickly.  The trick involves the service worker's install and activate events:

// Install event - cache files (...or not)
// Be sure to call skipWaiting()!
self.addEventListener('install', function(event) {
  event.waitUntil(
	caches.open('my-cache').then(function(cache) {
        // Important to `return` the promise here to have `skipWaiting()`
        // fire after the cache has been updated.
        return cache.addAll([/* file1.jpg, file2.png, ... */]);
    }).then(function() {
      // `skipWaiting()` forces the waiting ServiceWorker to become the
      // active ServiceWorker, triggering the `onactivate` event.
      // Together with `Clients.claim()` this allows a worker to take effect
      // immediately in the client(s).
      return self.skipWaiting();
    })
  );
});

// Activate event
// Be sure to call self.clients.claim()
self.addEventListener('activate', function(event) {
	// `claim()` sets this worker as the active worker for all clients that
	// match the workers scope and triggers an `oncontrollerchange` event for
	// the clients.
	return self.clients.claim();
});

Ultimately returning the skipWaiting() from the install event triggers the activate event, activating the service worker immediately and allowing your service worker to work with fetch events and other service worker capabilities.  Service workers require a navigation event (reloading the page, going to a new page, etc.) to activate which is why this trick is so handy.

Look forward to more service worker tips and examples on the blog over the coming months!