O'Reilly logo
live online training icon Live Online training

Mastering Service Workers

Bringing your progressive web apps offline

Maximiliano Firtman

Service workers are a new need-to-know technology that allow web developers to engineer their sites and web apps with offline access, increased performance, and the many other advancements that a progressive enhancement approach offers the modern web.

Join expert Maximiliano Firtman as he walks you through using service workers and other recent specs to build a web app. Through a mix of lectures and hands-on exercises in two three-hour sessions, you’ll learn how to create a better experience for offline usage in your web apps while also improving perception and performance while the user is online.

What you'll learn-and how you can apply it

By the end of this live, online course, you’ll understand:

  • Service worker basics, including how to install, activate, and update a service worker
  • How to precache assets and cache on the fly using cache storage for offline usage
  • How to improve perception and UX for online users with service workers

And you’ll be able to:

  • Implement your own cache policies, acting as a network proxy
  • Improve UX through background sync and performance optimization

This training course is for you because...

  • You’re a web developer who needs to increase your website’s performance.
  • You’re building web apps or progressive web apps, and you need to support offline users and users with bad connections.
  • You’re a web designer who wants to improve your website’s user experience.

Prerequisites

  • At least a year of experience working with JavaScript
  • An understanding of HTML

Recommended preparation:

“Why Are Service Workers So Great for Web Performance?” (article)

Service Workers: Introduction (video)

Head First JavaScript Programming (video)

Head First HTML and CSS, 2nd Edition, Chapters 1-6 (video)

Materials and downloads needed:

A connected computer, laptop, or other machine with an up-to-date copy of Google Chrome, Node.js, and the code editor of your choice installed

About your instructor

  • Max Firtman is a mobile and web developer, trainer, speaker, and writer. Max teaches mobile HTML5 and performance trainings for top companies around the world. The founder of IT training company ITMaster, Max is a well-known professional in the mobile web community. He blogs about mobile web platforms on Mobilexweb.com, keeps compatibility tables updated at Mobilehtml5.org, and has written many books, including Programming the Mobile Web (available in a second edition) and the recent High Performance Mobile Web, published by O’Reilly Media. He is a frequent speaker at conferences, including QCon, Mobilism, OSCON, Velocity, Fluent, Google Developer Day, JSConf, GOTO, AdobeCamp, and many other events around the world. Max has been widely recognized for his work in the mobile web community. He is an Adobe Community Professional, Microsoft IE User Agent, Nokia Developer Champion, and BlackBerry Elite, among other distinctions.

Schedule

The timeframes are only estimates and may vary according to how the class is progressing

Day 1

Give more power to the web (50 minutes)

  • Lecture: Service worker basics—Current abilities, compatibility, available APIs to use on top of service workers, and real-world examples

Break (10 minutes)

Install and activate a service worker (50 minutes)

  • Lecture and demo: Coding a service worker, including how to install it through JavaScript, metatags, and HTTP headers; debugging a service worker; the service worker lifecycle; and the scope and the abilities inside a service worker
  • Hands-on exercise: Code a service worker, test it, and debug it using Chrome Developer Tools; explore the power of a service worker by creating a URL echo

Break (10 minutes)

Add cache and offline support (50 minutes)

  • Lecture: How to add cache support to an existing web app by precaching assets from the app shell and caching other requests as they are needed
  • Hands-on exercise: Create an offline-capable web app with cache storage

Wrap-up and Q&A (10 minutes)

Day 2

Use sw-toolbox and sw-precache (50 minutes)

  • Lecture: Explore the open source frameworks sw-toolbox and sw-precache, which allow you to create a complex service worker caching scenario without having to do it manually
  • Hands-on exercise: Use sw-toolbox and sw-precache to create an offline-capable website that can update resources when needed thanks to a preproduction command-line tool

Break (10 minutes)

Add background sync and readable streams (50 minutes)

  • Lecture: How to add background sync and use readable streams to manipulate a response while it's coming from the network for improved performance
  • Hands-on exercise: Code a background sync operation, including communicating with active clients and using a readable stream example; learn how to detect if these APIs are available

Break (10 minutes) Break the limits with service workers (50 minutes)

  • Lecture and demo: The BPG image format, new compression algorithms, delta updates, responsive images, and what’s coming in the near future
  • Hands-on exercise: Explore the upcoming periodic background fetch

Wrap-up and Q&A (10 minutes)