Exploring Service Workers
Learning Paths:
Topics:
Table of Contents
Introduction
Introduction
Kyle Simpson introduces the course on service workers by sharing a few helpful resources and then describing the problems that can be solved with service workers.
The Case for Service Workers
Kyle makes a case for service workers by highlighting the responsibility of developers to deliver website experiences thoughtfully.
Web Workers
Introduction to Web Workers
Kyle introduces web workers, the precursor to service workers, by explaining their intended usage of handling an offload of heavy processing in a separate thread from the webpage. Child, dedicated, and shared workers are introduced.
Creating a Worker
Kyle introduces the basic parts of the two JavaScript files that will be built upon during the web worker exercise, one to handle events and one to handle processing, and configures the web worker to print a message to the console during initialization.
Communicating with a Worker
Kyle creates two-way communication between the web worker and the web page and explains how the structured clone algorithm determines how the data is sent.
Data Transfer Solutions
Kyle gives a history of how the problem of web workers copying transferred data has been dealt with, mentioning transferables, shared array buffers, and the atomics API.
Receiving Data from a Worker
Kyle configures the web worker to do the processing work of getting Fibonacci numbers when a message is received, and the client to update the web page to display the new number.
Web Workers Q&A
Kyle fields questions about browser choice and debugging web workers in the developer tools console.
Service Workers
Service Worker Use Cases
Kyle explains what the job of a service worker is, describing service worker code as a proxy that exists in the browser. The common use case of caching is discussed.
Use Case Brainstorming
Kyle and the students brainstorm ideas for use cases involving service workers. Among those mentioned are transparent URL rewriting, programmatically-created content, prefetching, and dependency injection.
Push Notifications
Kyle analyzes misconceptions around the well-known technology of push notifications, including the incorrect perception that it is a single technology as opposed to being two.
serviceworke.rs
Kyle highlights the a website resource for help in building service workers that contains side-by-side, annotated code examples for performing operations involving service workers.
Service Worker Project
Following Along
Kyle outlines an optional process for following along with the course using commit hashes.
Service Worker Project
Kyle introduces the project on service workers, which is to take a blog website which has been provided and add a service worker to prevent site death during offline and server downtimes.
Detecting Offline Status
Kyle demonstrates how to detect a user's offline status and show a visual indication of the detected status by toggling the visibility of an offline icon.
Register & Install a Service Worker
Kyle writes an asynchronous function to initialize a service worker by installing and registering it.
Service Worker Access
Kyle writes code to enable access to a service worker based on three possible states: installing, waiting, or active.
Creating a Service Worker
Kyle begins to write the code for the service worker by adding a version number, a main function, and event handlers for install and activation events.
Keeping the Service Worker Alive
Kyle introduces the waitUntil method, a way to tell the browser not to shut down, and gives an example of a situation where allowing the service worker to continue to run is useful.
Inspecting Service Worker Lifecycle
After demonstrating how to use the developer console to inspect service workers, Kyle analyzes the lifecycle of a service worker by pointing out the phases passed through during creation, stopping, and starting.
Message Handling in the Client
Kyle adds the ability to communicate with the service worker from the client by creating a function to send a status message through a channel port the service worker is listening on.
Message Handling in the Service Worker
Kyle hooks up the other end of communication between the service worker and the client. The client and service worker are then able to communicate about logged in and online status.
Service Worker Cache
Specifying Cached URLs
Kyle creates a version cache name for the collection in the cache, discusses loading and updating resource data about the cache and caching for logged in versus logged out users, and creates a list of URLs to be cached.
Caching Q&A
Kyle fields questions about request URLs and friendly URL rewriting in relation to caching.
Adding to Service Worker Cache
Kyle writes an asynchronous function to cache using the URLs specified in the list, mapping over the array of files and either getting a result from the cache or making a fetch request to add to the cache.
Service Worker Cache Demo
Kyle adds function calls for caching logged out files on application startup and service worker activation, differentiating between when and when not to forcibly reload the cache. Cached items are then viewed from the developer console.
Clearing Service Worker Cache
Kyle creates a method to clear the service worker cache by removing the old items, waiting for all delete operations to finish, and creating a new cache with the updated version name. Questions are then answered about cache expiration.
Service Worker Routing
Routing Cache Fallback Offline
Kyle makes a recommendation about when to add a service worker to a project. Then, code is written to intercept inbound requests coming from the page through the service worker.
Caching Strategies
Kyle discusses strategies for responding to requests, including loading from the server based on online status, using the cache, caching proactively, and checking the cache before loading from the server.
Implementing a Caching Strategy
Kyle implements a strategy for responding to inbound and outbound requests, which is to make the request to the server and then cache the resource if it is not already present in the cache.
Offline Routing Demo
Kyle tests the application's ability to run offline using the cache, enabling the user to view site pages offline, even when the server is shut off.
Offline Routing Q&A
Kyle fields questions about page reloads while in offline mode and dealing with request URLs with query parameters compared to ones without.
Logged Out Routing Walkthrough
Kyle walks through additional logic for the router that handles specific cases, dealing with the routing behavior that is not sensitive to whether the user is logged in.
Authentication Aware Routing
Kyle pulls in another update to the router logic dealing with specific routing cases having to do with behavior sensitive to logged in users. A refactor is applied to the logged out routing code.
Login & Logout Routing
Kyle discusses routing behaviors for authenticated users visiting login and logout pages. Explanation is given for why the behavior of cache routing is designed to mimic the server.
Authentication Aware Routing Demo
Kyle demos the application's behavior for authentication aware routing, including showing the cached API request, viewing the cached add post page, and viewing cached blog posts.
Improving UX
Proactive Background Caching
Kyle explains how to slowly load posts in the background by caching all posts by ID during the service worker's initialization.
Storing Form Data in IndexDB
Kyle demonstrates how the application can help the user by using IndexDB to enable offline saving for data on the add post page without an internet connection.
