Skip to main content
Dublin Library

The Publishing Project

Application Shells and Service Workers: sw-toolbox and Polymer


Building a ServiceWorker using Google libraries #

Google provides an abstraction layer over Service Workers called sw-toolbox that hides a lot of the complexities of a Service Worker without sacrificing functionality.

The example below uses sw-toolbox to create a serviceworker that precaches the application shell and treats everything else as a default with a network-first  strategy.

(global => {
  'use strict';

  // Load the sw-toolbox library.

  // List of files to precache. This should be automated.

  // Turn on debug logging, visible in the Developer Tools' console.
  global.toolbox.options.debug = true;

  // precache the files in FILES_TO_PRECACHE

  // By default, all requests will use the toolbox.networkFirst cache
  // strategy, and their responses will be stored in the default cache.
  global.toolbox.router.default = global.toolbox.networkFirst;

  // Boilerplate to ensure our service worker takes control of the page 
  // as soon as possible.
      event => event.waitUntil(global.skipWaiting()));
      event => event.waitUntil(global.clients.claim()));

Building a ServiceWorker using Polymer Platinum Elements #

This is not an article about Polymer or the platinum-sw element. It is mentioned just for completeness sake.

Polymer provides elements to create Service Workers and cache sitting on top of sw-toolbox. The partial example below, taken from the platinum-sw distribution shows how to configure the Polymer Service Worker element .

We can also choose to incorporate the platinum-sw element inside other elements like we do for our Ajax calls.

    <template is="dom-bind" id="page-template">
      <platinum -sw-register skip-waiting
        </platinum><platinum -sw-cache default-cache-strategy="networkFirst"

The precacheList element can be created manually or automated as part of a build process.

Edit on Github