Workbox
Fleeting- External reference: https://developer.chrome.com/docs/workbox/modules/workbox-sw?hl=en
- External reference: https://web.dev/learn/pwa/workbox/
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.
workbox-sw: A way to load Workbox service worker packages from a CDN that doesn’t use a build process
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
- External reference: https://developer.chrome.com/docs/workbox/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/