Service Worker dummy

What it is

Service workers act as proxy servers that sit between web applications, the browser, and the network (when available).

They are intended, among other things, to enable the creation of effective offline experiences, intercept network requests, and take action based on whether the network is available and update assets residing on the server.

Example: The request goes through SW. It returns cache data otherwise, go to the network

📚 https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API

📚 https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers

Life-cycle

• Registration

• Installation

• Activation

📚 https://developer.chrome.com/docs/workbox/service-worker-lifecycle#registration

Cache API and Cache Strategy

There is a CacheAPI intended to be used with the SW (but you don’t have to)
📚 Cache API: https://developer.mozilla.org/en-US/docs/Web/API/Cache

📚 Cache Strategy: https://developer.chrome.com/docs/workbox/caching-strategies-overview

Examples

1. Using SW to cache font files

   1. Github: https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js

   2. Demo: https://googlechrome.github.io/samples/service-worker/selective-caching/

2. Prefetching + caching assets + Caching network response

   1. Github: https://github.com/mdn/dom-examples/tree/main/service-worker/simple-service-worker

   2. Demo: https://bncb2v.csb.app/