Readme
Demo
index.js
service-worker.js

  • index.js

  • if (navigator.serviceWorker.controller) {

  • A ServiceWorker controls the site on load and therefor can handle offline fallbacks.

      debug(
    navigator.serviceWorker.controller.scriptURL +
    ' (onload)', 'controller'
  );
  debug(
    'An active service worker controller was found, ' +
    'no need to register'
  );
} else {

  • Register the ServiceWorker

      navigator.serviceWorker.register('service-worker.js', {
    scope: './'
  }).then(function(reg) {
    debug(reg.scope, 'register');
    debug('Service worker change, registered the service worker');
  });
}

  • The refresh link needs a cache-busting URL parameter

    document.querySelector('#refresh').search = Date.now();

  • Debug helper

    function debug(message, element, append) {
  var target = document.querySelector('#' + (element || 'log'));
  target.textContent = message + ((append) ? ('/n' + target.textContent) : '');
}

  • Allow for “replaying” this example

    document.getElementById('clearAndReRegister').addEventListener('click',
  function() {
    navigator.serviceWorker.getRegistration().then(function(registration) {
      registration.unregister();
      window.location.reload();
    });
  }
);

Has it been useful?

Tell us what you think of this recipe by leaving a comment!