Service Workers Simplified with Caching Strategies 

The thing about Service Workers and the Cache API that you need to keep in mind, is that the developer is taking control away from the browser on how to cache and validate documents. The documents that you save in the cache can still have `cache-control` headers inside the saved Response objects, but the browser does nothing with them automatically. You need to write the logic in your Service Worker to read that value and decide how you want to handle the Response objects that are not expired, close to expiry, or past their expiry dates. Here is the MDN reference for the cache-control header - developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control

Just to elaborate: one of the first lessons in PWA development is the service worker scope, so this is where my confusion has originated from. I started out fetching my fonts from googleapis, which failed occasionally. But, if I can't share my font files on the primary domain with PWA's on subdomains due to CORS, then wouldn't the same rule apply to googleapis?

some of my questions were partially answered in the last 3-4 mins but, like a petulant 5yr old, I need MORE info 😜 Also, when I refer to "my fonts", I am referring to my own fonts that Google Fonts is serving. My app is a genuine offline app for parents to expose kindergarden children to specific handwriting styles according the Australian State where they will attend school. Hence, understanding the offline strategy to implement for fonts is important

​@@AussieInsider I think I would try to download the fonts as woff or ttf so you can host them yourself

Your content is awesome though

Managing the content that you put into the cache is another aspect of this. When using networkRevalidateAndCache you should be replacing the old version. If two files are saved in the cache with the same Request object as the key then the second one should overwrite the first. Tracking the number of items in the cache and deleting the oldest ones is one approach. You can also create multiple caches - one for images, one for styles and fonts, one for HTML, one for data, etc. Then decide where you are putting most of the files, which ones need to be cleared out, which ones are using up memory. It will depend on the app that you are building.

RU-vid is my public content. My courses are in the Mobile Application Design and Development program at Algonquin College

I tend to write my own service workers and cache handlers. However, Workbox is on my list to do eventually.