Service Workers - When Fetch Goes Wrong

This is the seventh video in the Understanding Service Workers course.
This video explains how you can use your Service Worker to handle an offline-first app as well has gracefully handling 404 errors. Also discussed are CORS errors with fetch calls from your Service Worker.
Code from Video: gist.github.co...
MDN Request mode reference: developer.mozi...
MDN respondWith reference: developer.mozi...
Full Service Worker video playlist: • Service Workers - Regi...

[@mikebryan3270]

A super introduction to service worker. I have coded a few PWA's and always had issues with how to implement a 404 page. Thanks for providing a clear solution to a complex problem.

[@sb_raash]

great explanation. solved the problem thank you very much

[@Colstonewall]

Amazing series Steve!

[@wallurisatya6986]

Can you make a push notification video also ? Thank you.

[@SteveGriffith-Prof3ssorSt3v3]

It's on my todo list

[@leolowe22]

Hi Route related stuff is generally handled by frameworks when online, 404 pages are available for non existen routes so in the online cases do we still need to handle that in service workers?

[@SteveGriffith-Prof3ssorSt3v3]

Absolutely. A service worker is like a proxy server between the website and the server. It makes decisions about what is working and what is not. It might have access to pages in the cache or it might not. If the browser is offline then the service worker is making all these decisions because the server that does the routing is completely out of reach.

[@mohamedabass2736]

how can i update any of the files that the service worker gets from the cache? whenever i put some content (lets say in an html file) that content never shows up in the page because the worker handling the fetch requests always gets the older file? i even tried to rename the file but it always matches the older one

[@SteveGriffith-Prof3ssorSt3v3]

When you fetch the files, you clone the response and save it in the cache, overwriting the old version.

[@SteveGriffith-Prof3ssorSt3v3]

kzbin.info/www/bejne/p2a1fYNjeKmArNU

[@mohamedabass2736]

@@SteveGriffith-Prof3ssorSt3v3 thanks for the reply. i did clone the response and saved it in the cache... after that the service worker will match the request(url of the file) but in my case it gets the older version of the response(the one that i just saved) not the new one with the new content

[@jedosho1891]

Hi Steve. I have a problem. when I set "opts" as a parameter in fetch event (Line 90), the function of going to "nowhere.html" stops working, and when I delete that parameter it works again. I do not know why that happens. :(

[@SteveGriffith-Prof3ssorSt3v3]

the "navigate" value for the mode option is no allowed to be set in script. Only the browser can set that one. So, if the value is "navigate" then leave it out of your options.

[@sandeshnangarepatil]

Hi Steve, I’m currently calling an API every 5 minutes from my service worker and storing the data in IndexedDB. I’d like to continue this process even when I close my browser window, similar to how background sync works. How can I achieve this?

[@SteveGriffith-Prof3ssorSt3v3]

Service Workers get shut down by the browser. They are only given a few seconds to run. You can't keep them running. Even if you use ev.waitUntil(), there is a limit to how long it will wait. You need an event trigger to wake the service worker up. If the webpage makes a fetch call, that will trigger the fetch listener in the worker and wake up the script. Same thing with the browser window. When it closes, all its scripts stop running. When a page is moved into the background and no longer active the browser wants to stop the scripts as soon as possible.

[@RadjiMubarakElMobizy]

can service workers function even when the browser is off

[@SteveGriffith-Prof3ssorSt3v3]

No.

[@addie023_6]

are the fonts loaded in cache supposed to be opaque?

[@SteveGriffith-Prof3ssorSt3v3]

If things like fonts and images are fetched from external domains and don't meet the CORS rules then they will be opaque. Which means that the browser is allowed to load them by you can't load them via JS.

[@lllllllllIIIIIIIIIIl]

I love you!