Service Workers - waitUntil, skipWaiting, and claim methods

[@vidhyarevathi9281]

Great explanation. I surfed a lot but this helped me

[@alighadiri6123]

I was so confused about update lifecycle of serviceWorkers. now I know everything thanks to you. didn't find an in-depth tutorial like this.♥

[@derkvanderveen8938]

Great, crystal clear.

[@iwswordpress]

Thanks for this. SW lifecycles can be quite involved. Good explanations.

[@StijnHommes]

There is only one thing that matters: their life cycle is too long. The life cycle of a service worker should be zero seconds (or less).

[@tomekk3569]

Great explanation! Thank you very much. :)

[@wallurisatya6986]

awesome explanation. Big fan of your tutorials.

[@tabliqatchi6696]

I've got two questions:
1 - At 10:50 you say if we've made breaking changes we must be careful about using Clients.claim. May I know like what sort of changes would be considered breaking here?
2 - Also at 12:17, skipWaiting is still uncommented, and when you refresh, the stuff in the install event handler don't run at all, why? What skipWaiting does is skipping the waiting to activation (of a new installation), why would it cause the other code in the install handler not to run?
Thank you this video is great ♥

[@expukpuk]

Thanks Mate, nice.

[@leolowe22]

Thanks for the video one question though, After we claimed we still did not get fetch request interception from the updated service worker after the claim message was printed.

[@user-ti6yk5hv7q]

Didn't regret watching this =)
But my sw "fetch" listener did not work if I press "clean caches and hard reset" button in chrome. Nor waitUntil() nor skipWainting() nor claim() does not help with that.
Though claim() helped if I unregister sw in dev tools and reload.

[@KarimShaloh]

Link for code gist is not included

[@SteveGriffith-Prof3ssorSt3v3]

Whoops. There now.

[@kingwindie]

so the self.skipWaiting will not be triggered until the .then() chains are completed? Promise is kinda confusing to me

[@SteveGriffith-Prof3ssorSt3v3]

Here is my playlist about Promises to help you - ruclips.net/video/SmPouEFKOBg/видео.html

[@kingwindie]

@@SteveGriffith-Prof3ssorSt3v3 thank you so much, really helpful videos

[@xyz-ey7ul]

What's the purpose of the "controllerChange" event?

[@SteveGriffith-Prof3ssorSt3v3]

Because a service worker can be controlling multiple windows/tabs and your code can force a new service worker to take over the pages, this gives us an event to listen for.

[@omerdavid5490]

Hey! the video is awsome.
Do you know any way to listen "fetch" and *delay* or *block* the http request of file?

[@SteveGriffith-Prof3ssorSt3v3]

Inside the fetch listener and its the waitUntil( ) you can do whatever you want with the request. You can return a different file, fetch a new one from a server, send an old version from the cache and then fetch a new version from the server and put that in the cache...

[@omerdavid5490]

@@SteveGriffith-Prof3ssorSt3v3 Its ok to do it with event.respondWith and then in the callback, delay the request?

[@SteveGriffith-Prof3ssorSt3v3]

@@omerdavid5490 Sorry, I meant respondWith inside the fetch event handler function. You can't create a delay though because the service worker wants to stop running.

[@omerdavid5490]

@@SteveGriffith-Prof3ssorSt3v3 what do u mean? i tried this and its looks like its work for me . can you please explain?
event.respondWith(
(async function () {
await waitTimeout(10000);
return await fetch(event.request);
})()
);

[@SteveGriffith-Prof3ssorSt3v3]

@@omerdavid5490 there is only so long the browser will wait before canceling the request. That goes for the service worker too.

[@mod7ex_fx]

❣