Skip to content

lyzadanger/pragmatist-service-worker

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.

About

Pragmatist's Guide to Service Worker

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published