Service Workers - The Cache API
HTML-код
- Опубликовано: 25 окт 2024
- This is the second video in the Service Worker Playlist.
This video is focused on explaining the Cache API which lets developers control when and how to save files in a origin-based cache.
Code from video: gist.github.co...
MDN reference for Cache: developer.mozi...
Images used in video: picsum.photos/...
picsum.photos/...
Full Service Worker playlist: • Service Workers - Regi...
Steve, thank you for being such a good professor. I've searched so much for these kind of lessons. You make hard stuff look "easy". And your voice is a bonus :)
I just don't like when you fast fw some longer writing - even your typing is therapeutic :)
If you keep some of these series updated, you will probably be able to just do this if you like. I hope the algorithm catches you fast. I sure will do all I can to contribute to that.
This is like having an Encyclopedia at home
Thanks once again and looking fw to continue with next lessons.
It's the third time that I watch this video and every time I learn more! Thanks
Well explained and easy to follow. Thank you Steve
Thank you for creating this video. Helps a lot
Best video on caching on YT!
Definitely the best tutorial of the whole RUclips.
Just one question, you have mentionnée keys can be strings, url object or request object but they always end up being stored as request object in the cache.
However at the end of the video you request a deletion of an asset in the cache based on a string.
Does it mean cache is smart enough to convert it to a request object to make it match with the asset you want to delete?
Yes.
You are a superb teacher
very nice, I love those videos
Brilliant video. Thank you!
Thank you professor
At 25:50, we didn't actually use the complete response object, instead we just reused the url and passed it to the src of newly created img tag, which is again going to call fetch to fetch the actual image.
Am I understanding this correctly?
Is there a way to use the complete image data stored in cache and directly create the image ?
nvm professor, it was answered here ruclips.net/video/ZY0WTY-g_js/видео.htmlsi=2WMzIUpTuc6dRg2Y, thank you.
Thanks Steve Awesome as always :). one question please. Does the browser automatically cache your Css/Js files and Control them if something has changed?
can you elaborate on that topic I was trying to find answers, but haven't found good answers out there. Cheers is advance
Browser cache and the Cache API are two separate caches. Generally the browser will try to cache files like images, css, and js files based on their headers when they are first downloaded.
With the Cache API we are taking control of the process and building our own cache that is independent of the browser cache.
We can also use the Service worker to intercept file requests and then tell the browser not to bother caching them.
There will be a future video on fetching from the service worker.
@@SteveGriffith-Prof3ssorSt3v3 Steve So much appreciation really. firstly for the quick and tot he point reply. and for all the effort you put in to give us all the amazing content. God bless :)
Hi Steve - thank you for explaining so neatly and thoroughly. I have a question, do we have any size limit on cache ? For example if I have a rest end point request which gives huge json response, may be 10 mb, is it suggestable to use service workers cache ?
Size limits vary by browser and there are different limits for different things - cookies, localStorage, CacheAPI, IndexedDB, etc. There are also different limits depending on whether you are on laptop or mobile. Many of the limits are not published as exact numbers. There are limits by domain as well as total storage capacity on the device.
Remember that the Cache API works from your web pages as well as from the Service Worker. The primary purpose of the cache is to be able to save files for cases when the user is offline. If your file is critical to keep your website / web app running offline then it doesn't matter if it is 50MB or 5KB you should save it.
@@SteveGriffith-Prof3ssorSt3v3thanks! And how long does it stay ? For example on IOS if I don’t use the PWA for few hours I feel it’s going away
@zacdu93600 there is no real guarantee. It is different on different browsers, devices, OS. The browser makes the decision about what to delete based on frequency of use and available storage. IOS is definitely the shortest. In optimal conditions 7 to 14 days is the max.
Does service worker or browser support encrypting cache storage by default. Incase if we need to store sensible information of some http requests. And also is it possible to cache POST request - response ?
No cache is not encrypted. You can cache any response from the server regardless of which HTTP method was used to retrieve it.
So we can use cache storage without service workers?
Absolutely. I have a video on file handling for web apps where I talk about that a lot
Hay quá
Someone is using then block in 2021. You definitely need upgrade
I still use then. I still prefer that syntax. There is nothing wrong with chaining then methods.
WHY THIS?
Just post a tutorial about how to kill service workers in your browser permanently.
Not as a "developer" who brought them into the world, but as an end-user who has to deal with them.
anyone facing error the operate is insecure on firefox tracking protection? I just use caches.open() method
This error can happen on Firefox in Private mode. Eg: github.com/mapbox/mapbox-gl-js/issues/11819
@@SteveGriffith-Prof3ssorSt3v3 I still have this error in normal mode when tracking protection on firefox is turned on all my research just told me I need to change the browser setting which isn't a good way to make the user change their setting every time they visit our website
In Firefox when you are in incognito mode I believe cache is disabled (API cache)
My best teacher in the world, thanks so much, You're not only a Prof) you're the best Prof 🤍