Presented by Stephen Fornal

Learn to leverage the power of Service Workers to make your site faster, more robust, and even make content available offline! Service Workers are the best kind of progressive enhancement; they work with an ever-increasing number of browsers, and allow you to add more robust caching, prefetching of critical assets, offline content, and even implement push notifications.

You will learn how to create and install a Service Worker for your site, what new browser APIs are available to your Service Worker, and several concrete strategies for getting started with a Service Worker on your site for some immediate performance gains. The future of the web is pretty bright, and Service Workers are an amazing new tool in our toolbox.

Notes

• Service workers js is scoped – should be placed at the root to work with all pages.
• Can create additional service workers in sub-folders.
• A trip to the cache is always faster than a trip on the network (and available off line).
• Add versioning string to cache names to keep track.
• event.waitUntil – keep the service worker alive until an event happens.
• Fine tune the caching strategy:
  • Show images in cache – then fetch a new copy from the network
  • Webpages – go to network, unless network is not available
    • But what if they are off network and don’t have a cached version: show a pre-fetched “off line” page!
  • They cache up to 20 pages and 80 images (there is no limit, but be nice to the devices memory)
• Debbugging: Chrome dev tools has a good service worker debugger
• Service workers are teh first step to creating a Persistent Web App (PWA)
  • Service worker
  • Offlline content
  • File called manifest
• Good resource Going Offline

Take aways:

• Should we pre-cache our alert page for off line use?
  • Could
• Can also do push notifications.