Exploring Service Workers
Table of Contents
IntroductionKyle 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 WorkersKyle makes a case for service workers by highlighting the responsibility of developers to deliver website experiences thoughtfully.
Introduction to Web WorkersKyle 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.
Communicating with a WorkerKyle 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 SolutionsKyle 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 WorkerKyle 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&AKyle fields questions about browser choice and debugging web workers in the developer tools console.
Service Worker Use CasesKyle 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 BrainstormingKyle 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 NotificationsKyle 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.rsKyle 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 AlongKyle outlines an optional process for following along with the course using commit hashes.
Service Worker ProjectKyle 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 StatusKyle 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 WorkerKyle writes an asynchronous function to initialize a service worker by installing and registering it.
Service Worker AccessKyle writes code to enable access to a service worker based on three possible states: installing, waiting, or active.
Creating a Service WorkerKyle 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 AliveKyle 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 LifecycleAfter 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 ClientKyle 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 WorkerKyle 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 URLsKyle 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&AKyle fields questions about request URLs and friendly URL rewriting in relation to caching.
Adding to Service Worker CacheKyle 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 DemoKyle 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 CacheKyle 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 OfflineKyle 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 StrategiesKyle 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 StrategyKyle 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 DemoKyle 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&AKyle fields questions about page reloads while in offline mode and dealing with request URLs with query parameters compared to ones without.
Logged Out Routing WalkthroughKyle 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 RoutingKyle 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 RoutingKyle 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 DemoKyle 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.
Proactive Background CachingKyle 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 IndexDBKyle 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.