Pragmatist's Guide to Service Worker
HTML JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
media Initial commit Sep 10, 2016
missions Initial commit Sep 10, 2016
.eslintrc Initial commit Sep 10, 2016
.gitignore
README.md Initial commit Sep 10, 2016
default.css Initial commit Sep 10, 2016
index.html Initial commit Sep 10, 2016
package.json
server.js

README.md

Pragmatist's Guide to Service Workers

In this repository, you'll find code examples to illustrate the Pragmatist's Guide presentation, given at Smashing Conference, Freiburg, September 2016.

Install

Clone this repository, then:

npm install

To run a local web server and see the examples in action, run:

npm start

You'll want to use a browser that supports Service Worker; I use Chrome but SW is also supported in Firefox and Opera to differing extents.

Note: These examples, run locally, rely on the localhost exception to the SSL/TLS requirement for Service Workers.

Examples

  1. Mission 1: Offline message — Respond to navigation requests (i.e. requests for HTML documents). Try to fetch from the network, but if that fails, return a Response object that emulates a simple web page with an Oh, dear message.
  2. Mission 2: Offline page — Same as before, but instead of returning a self-made Response on fetch failure, cache an offline HTML page during the install phase and return that upon fetch failure.
  3. Mission 3: Network strategies — Respond to fetches for content (HTML) and static assets (images) differently. Use a network-first strategy for content and a cache-first strategy for images.
  4. Mission 4: Application shell — During the install phase, cache a bunch of static assets that we consider to be our application's "shell". Respond to fetches and look in the cache first for requests for those assets. Once the service worker is installed, you can go offline and continue to "request clouds" (images of clouds).
  5. Mission 5: Cache naming and cleanup — Use cache-prefixing to manage versioning of a service worker and, during the activate phase, clean up (old) caches that don't match the new cache prefix. To version-bump, you'd want to change the cachePrefix value.
  6. Mission 6: Fancypants — Add a fallback offline image and use a JSON file as a source of URLs to pre-cache during install.