Service Workers - waitUntil, skipWaiting, and claim methods

This is the third video in the Understanding Service Workers Series.
This video focuses on three very powerful methods that you can use inside Service workers to control the timing of the installation and activation of the service worker files - ev.waitUntil, self.skipWaiting, and clients.claim.
The waitUntil method we will be using in future videos about the cache api and the fetch api too.
Code from video: gist.github.co...
Images from picsum:
picsum.photos/...
picsum.photos/...
MDN reference for waitUntil: developer.mozi...
MDN reference for skipWaiting: developer.mozi...
MDN reference for claim: developer.mozi...
Full playlist about service workers: • Service Workers - Regi...

[@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).

[@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.

[@expukpuk]

Thanks Mate, nice.

[@vidhyarevathi9281]

Great explanation. I surfed a lot but this helped me

[@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 - ua-cam.com/video/SmPouEFKOBg/v-deo.html

[@kingwindie]

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

[@mod7ex_fx]

❣

[@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.

[@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 ♥

[@shujaatali8414]

I really loved to your videos.

[@АлександрКостарев-ж1к]

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.

[@tomekk3569]

Great explanation! Thank you very much. :)

[@wallurisatya6986]

awesome explanation. Big fan of your tutorials.

[@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.