Learning Fetch, Web- and Service Workers

Learning using Service Workers, Web Workers and Cache – articles, useful resources, courseware, personal notes.

« A Web Worker runs the code of a Javascript file in an isolated worker thread. There are different kind of Workers; in a webapp, the most common are:

• Dedicated workers are utilized by a single script; whereas
• Shared workers are workers that can be utilized by multiple scripts running in different windows, IFrames — as long as they are in the same domain as the worker; as of 12.2018, they have little support in mobile browsers though;
• Service workers are event-driven workers, registered against an origin and a path. They act as a programmable network proxy, that sits between web applications, the browser, and the network — when available —, allowing you to control how network requests from your page are handled. They enable the creation of effective offline experiences, among other things; they also allow access to push notifications, background sync and geofencing APIs. »

Use cases
Prefetching and/or caching data for later use	Analyzing video or audio data
Code syntax highlighting or other real-time text formatting	Spell checker
Background I/O or polling of webservices	Updating many rows of a local web database
Processing large arrays or humungous JSON responses	Image filtering in

Learning

• The Basics of Web Workers Reading notes of various articles, synthesis of a 4-days code retreat in december 2018.

Experiments

• 01. Web Worker instantiation Classic-, Module- or Embedded script.
• 02. Async Generators Single worker, delegation to multiple subworkers, async generator functions to play with.
• 03. Transferable objects Apply image filtering to a source image, delegating the heavy-lifting, passing the large amount of image data in/out the worker as a Transferable object.

Articles: fundamentals

Web Workers

See document The Basics of Web Workers #2 above for reading notes.

• H5R › The Basics of Web Workers Eric Bidelman, 26.07.2010 describes Dedicated Workers from the Web Workers specification, that are refered to as Web Workers
• WWG › HTML Living Standard › Web Workers Specification which defines the API for running scripts in the background, independently of any user interface scripts.
• MDN › Web Workers API describes Dedicated-, Shared- and Service workers, as well as Chrome- and Audio Workers
• GWF › Updates › Workers ♥ ArrayBuffer Eric Bidelman, 08.2011 Typed arrays I/O and Structured clone algorithm; no more base64 encoding the data!
• GWF › Updates › Transferable Objects: Lightning Fast! Eric Bidelman, 12.2011 Demonstrates the huge performance improvement for message passing, that can be achieved with Transferable Objects.

Service Workers

• GWF › Service Workers: an Introduction Web Fundamentals, Matt Gaunt, 21.09.2018
• W3C › Service Workers explained by Alex Russel, initial publ. 22.04.2013 / ongoing updates until 11.2017
• W3C › Service Workers Specification by Alex Russel, Jake Archibald, Jungkee Song and many others
• The Year of the Streams Jake Archibald, 25.01.2016

Application Cache

• H5R › A Beginner’s Guide to Using the Application Cache HTML5Rocks, Eric Bidelman, 18.06.2010 (published) / 29.10.2013 (updated)

Videos & Teaching games

Web Workers

• CDS › Building Faster, More Resilient Apps with Service Worker: A Caching Strategy Deep Dive Chrome Dev Summit, Ewa Gasperowicz & Phil Walton, 12.11.2018 « […] Not all service worker implementations are created equal, and they can offer vastly different performance benefits. Every prefetch and cache decision comes with speed vs. freshness and bandwidth vs. storage trade offs. Discover how to evaluate and build different service worker flows for your app, giving the best experience for your users. »

Service workers

• Mastery Games › Service Workies A collaborative project by Dave Geddes & Google Developers « Learn Service Workers inside and out with the new PWA Mastery Game » (Displayed at $229 — currently free, as of 12.2018)
• web.dev › Service worker mindset Dave Geddes, 04.06.2019 « A handful of depictive metaphors [referred to in the ‹Service Workies› game]; the post « explores these mental models and wrap our brains around the paradoxical traits that make service workers both tricky and awesome. »

Supporting and related technologies

Transferable Objects

• MDN › Web APIs › Transferable Objects A marker interface, that represents an object that can be transfered between different execution contexts, like the main thread and Web workers. The ArrayBuffer, MessagePort and ImageBitmap types implement this marker interface.
• See also above the articles GWF › Updates › Workers ♥ ArrayBuffer (Eric Bidelman, 08.2011) and GWF › Updates › Transferable Objects: Lightning Fast! (Eric Bidelman, 12.2011).

Fetching data

• GWF › Updates › Introducing Background Fetch Perform long-running fetches in the background. ➡️ Hear about the result in your service worker. ➡️ User can see progress and pause/cancel.
• MDN › WindowOrWorkerGlobalScope › fetch() method Returns a promise, that resolves to the resource contents; or rejects with a TypeError, when a network error is encountered (although this usually means a permissions issue or similar); an accurate check for a successful fetch() would include checking that the promise resolved, then checking that the Response.ok property has a value of true; note: an HTTP status of 404 does not constitute a network error.
• WWG › Fetch Living Standard Provides a unified architecture for the numerous APIs that provide the ability to fetch a resource (e.g. HTML’s <img> and <script> elements, CSS’ cursor and list-style-image, the navigator.sendBeacon() and self.importScripts() JavaScript APIs), so they are all consistent when it comes to various aspects of fetching, such as redirects and the CORS protocol; also defines the fetch() JavaScript API, which exposes most of the networking functionality at a fairly low level of abstraction.

Service Worker Toolchain

• Google Developer › Workbox A library for adding offline support to web apps; bakes in a set of best practices and removes the boilerplate every developer writes when working with service workers

Additional resources

• Learning Streams and Observables Learning using Streams, Observables and Transforms with JavaScript – articles, useful resources, personal notes
• Awesome Service Workers A curated collection of service worker resources, by the author of the O’Reilly book « Building Progressive Web Apps - O’Reilly »