Konubinix' opinionated web of thoughts

Workbox

Fleeting

Workbox, service workers

Workbox is a set of modules that simplify common service worker interactions such as routing and caching. Each module addresses a specific aspect of service worker development. Workbox aims to make using service workers as easy as possible while allowing the flexibility to accommodate complex application requirements where needed.

https://web.dev/learn/pwa/workbox/

workbox-sw: A way to load Workbox service worker packages from a CDN that doesn’t use a build process

https://web.dev/learn/pwa/workbox/

workbox-sw module provides an extremely easy way to get up and running with the Workbox modules, simplifies the loading of the Workbox modules, and offers some simple helper methods

https://developer.chrome.com/docs/workbox/modules/workbox-sw?hl=en

You can use workbox-sw via our CDN or you use it with a set of workbox files on your own server.

https://developer.chrome.com/docs/workbox/modules/workbox-sw?hl=en

just need to add the following to your service worker: importScripts(  ‘https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js');

https://developer.chrome.com/docs/workbox/modules/workbox-sw?hl=en

provide access to all of the Workbox modules. workbox.precaching.*workbox.routing.*etc

https://developer.chrome.com/docs/workbox/modules/workbox-sw?hl=en

Alternatively, you can create a reference to the relevant namespaces outside of your event handlers, and then use that reference later on: importScripts(  ‘https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js');// This will trigger the importScripts() for workbox.strategies and its dependencies:const {strategies} = workbox;

https://developer.chrome.com/docs/workbox/modules/workbox-sw?hl=en

here’s some code that uses import statements referencing Workbox modules: import {registerRoute} from ‘workbox-routing’;import {CacheFirst} from ‘workbox-strategies’;import {CacheableResponse} from ‘workbox-cacheable-response’;

https://developer.chrome.com/docs/workbox/modules/workbox-sw?hl=en

here’s the same code rewritten to use workbox-sw (notice that only the import statements have changed—the logic has not been touched): importScripts(  ‘https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js');const {registerRoute} = workbox.routing;const {CacheFirst} = workbox.strategies;const {CacheableResponse} = workbox.cacheableResponse;

https://developer.chrome.com/docs/workbox/modules/workbox-sw?hl=en

Serving cached audio and video

Workbox must be told to respect Range request headers by using the workbox-range-requests module to the strategy used as the handler.

https://developer.chrome.com/docs/workbox/serving-cached-audio-and-video/

<video> or <audio> elements need to opt into CORS mode with the crossorigin attribute

https://developer.chrome.com/docs/workbox/serving-cached-audio-and-video/

should explicitly add it to the cache ahead of time. You can do this by precaching, or with cache.add(), or by using the warmStrategyCache method in workbox-recipes.

https://developer.chrome.com/docs/workbox/serving-cached-audio-and-video/

Caching the media asset as it’s streamed at runtime won’t work, as only partial content is fetched from the network during playback.

https://developer.chrome.com/docs/workbox/serving-cached-audio-and-video/

<video src=“movie.mp4” crossorigin=“anonymous”></video><audio src=“song.mp3” crossorigin=“anonymous”></audio>

https://developer.chrome.com/docs/workbox/serving-cached-audio-and-video/

Notes linking here