nichoth/sw-test

serviceWorker demo

serviceWorker demo

Use these for debugging:

• chrome://inspect/#service-workers
• chrome://serviceworker-internals/

If you shift+reload a document it will always load without a controller.

How do I update the service worker

Change the service worker file, and make sure to update the cache key (the cache version).

• Close & reopen the tab, or shift+reload then normal reload

What's the deal with self?

self is a reference to ServiceWorkerGlobalScope. MDN

things to do

DRY way to keep track of static assets to pre-fetch. Our install event might fetch things like this:

cache.addAll([
  '/contact'
]);
return cache.addAll([
  '/',
  '/style.css',
  '/assets/img/bg-bah.png',
  '/assets/img/circle.svg',
  '/assets/img/triangle.svg'
]);

Tool to make a list of requests?

Check out sw-precache — a build tool that generates sw and asset list. You can use globs since it runs in gulp.

• automatically versions cached assets using a hash of the content
• knows which caches have expired

Research

• slightlyoff/ServiceWorker/explainer.md

• html5rocks

• Offline Cookbook

• MDN — API

• MDN — Using Service Workers

• trained to thrill (demo)

• registration example via google

• code examples