Service Workers Simplified with Caching Strategies
ฝัง
- เผยแพร่เมื่อ 1 ธ.ค. 2024
- This tutorial explains, in detail, how you can create caching strategies for your Service Worker and Progressive Web App to simplify writing the code that handles any situation for every file request. Create reusable functions that work for any website for handling your fetch requests and cache requests.
Code from video: github.com/pro...
You are the best teacher very clear explanation 💖😍
I always thought you had to open a cache first to do a match on the request. I was pleasantly surprised to see that you can do it on the caches object directly and it'll still work! Thank you so much for your content! 🙏
this video is a treasure
great video i still feel like for caching strategies it's best to use something like workbox but this really shows how things work internally
Great video, very clear and easy to understand! Is there a method where I can use staleWhileRevalidate, but only actually fetch the file from the network if it is a more recent file version? I have a number of PDF documents I want to cache and it would be great to revalidate them to keep current, but not redownload them every time to keep the cache current. The only way I can see to go about this is with the cache name/version, but then I am triggering a fetch of all the documents anytime there is an update to refresh the cache with. Is there a better strategy out there?
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
Awesome! This explains how to respond with offline events inside SPA service workers. If I have an offline.html then it defeats the purpose of (my) SPA. I wonder if I could request a video about CORS? This confused me somewhat since googleapis is cross origin.
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
La pregunta sería si está forma sirve con aplicaciónes hechas en react js o cualquier framework como next ?
I have a issue, the strategies that u mentioned are good but the problem is that lets take networkRevalidateAndCache for example since it always tries to fetch data from the server and put it in the cache if successful, overtime we are gonna have duplicate data, the same data will be put in the cache every reload because we are not deleting the old. I just noticed that my cache hit the 5 GB mark all filled wit duplicata data.. can yiu please help me regarding that
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.
Awesome Video ... Do you have a website where you offer your courses?
TH-cam is my public content.
My courses are in the Mobile Application Design and Development program at Algonquin College
Some service workers use Workbox from workbox-window, could you possible make video on that ?
I tend to write my own service workers and cache handlers. However, Workbox is on my list to do eventually.