Service Workers - Registration, LifeCycle, Events, and Dev Tools

[@redhood7105]

Honestly, This and your other playlists should be gold standard for any youtube educator who creates content for the serious learners. Thank you

[@shujaatali8414]

No one can stop me to listen full series. Awesome I loved the way you delivered.

[@scottbockelman310]

Best set of concise and informative tutorials I have found on PWAs and JavaScript. And I love the almost Bob Ross relaxed delivery. Thanks!

[@SteveGriffith-Prof3ssorSt3v3]

Thank you very much!

[@lalmimohammedissam8654]

I would love to be one of your students in real life. You make this look like a piece of cake, as they say, 'easy peasy lemon squeezy.' Thank you a lot professor

[@SteveGriffith-Prof3ssorSt3v3]

You can be if you come here www.algonquincollege.com/mediaanddesign/program/mobile-application-design-and-development/#overview 😀

[@sriramananthasivan482]

Prof3ssorSt3v3 - what an awesome series. I suppose you are the David Attenborough of the JavaScript world.. beautiful narration and explanation! . Grateful and thankful for your effort.

[@rebelmachine88]

Thank you for this series, looking forward to the rest. Great explanations as always!

[@staticselector7318]

2:16 😄😆😂🤣 If I can type ".then" super relatable 👌 Awesome series 👍

[@mikebryan3270]

I recently started experimenting with changing the wall colour of an image of a room stored as background with an SVG mapping the areas to change the colour. Your video has prompted me to consider storing the user’s colour selection and room image. An inspirational video! Thanks

[@kumailn7662]

Awesome man, awesome, the way you explained is awesome

[@mauricios3267]

Great video! Looking forward to going through the whole playlist!

[@TheAjayluke]

Great explanation for service workers. Loved it! Thank you for your effort.

[@shanusharma.]

Such a nice video, thank you so much for making it.

[@UmapathiKrishnan]

Thank you for your clear explanation

[@kienphan6436]

Thank you sir! This is very helpful.

[@kelechi.E]

I think a little introduction into service workers and when they are used would really be helpful.

[@SteveGriffith-Prof3ssorSt3v3]

That's what this whole playlist is about. :)

[@marinamohsen6940]

This was so informative , Thank You!

[@derkvanderveen8938]

Great tutorial, thanks.

[@marcepires]

Excelente! gracias Mister!

[@abhim6380]

Thank you for this.

[@tudoresan3119]

Very interesting! Thank you!

[@endergelisenosasunaatag275]

Hi Steve, first of all, thank you for sharing those videos, I want to ask you I read MDN docs like this but there are many interfaces, methods, properties on a subject, do these videos give me everything about service workers? should I keep reading MDN docs as a jr? I feel like slow.

[@SteveGriffith-Prof3ssorSt3v3]

Well, I've been doing web development for over 25 years... I still read the docs, and MDN, and articles, and watch tutorials.... This is a life long learning career. You will never know it all. Enjoy the journey.

[@bluemangroupie]

Thanks!

[@SteveGriffith-Prof3ssorSt3v3]

Thank you so much for your support!

[@akashshah1080]

Thanks Steve!

[@SteveGriffith-Prof3ssorSt3v3]

Thank you very much!! ❤🙏😊

[@shushens]

Amazing video! I learnt a lot! I have a question though. If you have multiple tabs open, which are essentially independent instances of the web application you have built, I assume they are running on different processes. If they are using the same service worker, how does the connection between them look like? The service worker will be a thread in the main process and the JS logic for each app will run in a thread of its own process and they will talk to each other through Mojo or something?

[@SteveGriffith-Prof3ssorSt3v3]

The service worker will be on its own thread and all the tabs will share a thread for the scripts on the tabs.

[@SteveGriffith-Prof3ssorSt3v3]

Here is a Playlist about ways to communicate between tabs or windows and service workers kzbin.info/aero/PLyuRouwmQCjk-hvtzQSrCSxBd4S0nOMh9

[@frontend_ko]

can i use this as a state manager like zustand or redux in react?

[@SteveGriffith-Prof3ssorSt3v3]

You can build a state management script into a service worker using messaging but it's not really what they are intended for.

[@KEVIN-nf9oh]

Hello professor! Can the same service worker principles be used within a Browser-Extension to monitor a fetch call and do [some logic]? I'm partcularly interested because of the introduction of Manifest Version 3 in chromium this year. Thanks as always!

[@SteveGriffith-Prof3ssorSt3v3]

I don't know what the level of support is for service workers in browser extensions for Chrome or Firefox

[@KEVIN-nf9oh]

@@SteveGriffith-Prof3ssorSt3v3 Ahh alright, no issues :)

[@leolowe22]

Hey! Thanks for the video, Just wanted to understand, The part where we delete the sw, so at one place it shows that its deleted and just below it still shows that its running and active at 17:21

[@SteveGriffith-Prof3ssorSt3v3]

The dev tools are not always completely accurate for service workers when it comes to updating the status. It's like there are different parts of the code that track different things and not all of them listen for the same events. The note at the top appeared saying that it was deleted. But the line with the green dot down below hadn't received the message yet. I've seen situations where the same worker is shown twice too. It may have to do with garbage collection of the worker. The connection between the page and worker has been severed but the actual script is still in memory. So, since it is still in memory the line with the green dot still thinks it is the current active worker, just because it was the most recent one, and it still exists, and it was activated at some point.

[@USPSLaura]

❤

[@ricardodesirat2590]

Hi Steve Just out of curiosity, is there a special reason for having all the logic inside an object (const APP)? Thank you

[@SteveGriffith-Prof3ssorSt3v3]

Namespacing is a great way to avoid naming conflicts with other code and libraries, it helps to organize your code, and I teach it as a first step towards using ES modules.

[@ricardodesirat2590]

@@SteveGriffith-Prof3ssorSt3v3 Thanks! Good to know. So, implementig it on everything is always a good idea? As well as the init on DOMContentLoaded?

[@SteveGriffith-Prof3ssorSt3v3]

@@ricardodesirat2590 it is a good practice and will make you think about how you organize your code more. And it will help you transition to modules

[@ricardodesirat2590]

@@SteveGriffith-Prof3ssorSt3v3 Thanks, Steve! This is a true learning channel.

[@siddhant3852]

Is this still relevant for today tech landscape, I want to use service worker for offline storage and caching some assets.

[@SteveGriffith-Prof3ssorSt3v3]

@siddhant3852 absolutely. Service workers are the core technology behind progressive web apps PWA.

[@codingroom928]

is there any way to communicate between different browsers like from chrome to edge or firefox?

[@SteveGriffith-Prof3ssorSt3v3]

Only through a server-side api

[@anushaavanigadda8124]

How can I use service workers with typescript in a nextjs app?

[@SteveGriffith-Prof3ssorSt3v3]

That's way too big of a question to answer in a comment

[@SteveGriffith-Prof3ssorSt3v3]

I will be doing some nextjs videos this summer

[@Turnables]

Why am I now learning about this?

[@SteveGriffith-Prof3ssorSt3v3]

@@Turnables I would guess that you are learning about PWA

[@NphiniT]

@@SteveGriffith-Prof3ssorSt3v3 It's actually a little more interesting. There is an experiment builder called Gorilla that allows one to write JavaScript to create custom components for the experiment. Now I'm trying to add a component to detect AI usage in respondents' text responses which requires me to make an asynchronous request. But all the lifecycle events are synchronous. So I was here because I was wondering if I could use a service worker to spawn a separate thread and have the life cycle method being called to wait for the service worker response before continuing. Basically, a way to call an asynchronous function within a synchronous function and have it wait for the async to complete before continuing 😫 If you have any ideas, I will gladly take them. But this service worker approach seems to not be it

[@SteveGriffith-Prof3ssorSt3v3]

@@NphiniT sounds like you need a web worker or a shared web worker.

[@norbertperka9231]

hi Steve ,good tutorial but still doesn't work for me .I can't registered SW it testing on localhost ,don't know if webpack is responsible for this . Thanks Anyway for good explanation

[@SteveGriffith-Prof3ssorSt3v3]

check for spelling of the filename, errors in the browser dev console, if another service worker is already registered for localhost in the browser application tab.

[@norbertperka9231]

@@SteveGriffith-Prof3ssorSt3v3 I unregistered everything ,that's what console return to me Uncaught (in promise) TypeError: Failed to register a ServiceWorker for scope ('localhost:5500/') with script ('localhost:5500/sw.js'): A bad HTTP response code (404) was received when fetching the script. I change localhost; was 8080 and enabled it for save though flag in chrome , not sure if webpack is messing or im doing probably somethig wrong , i tried many option what i found on MdM about SW BY the way thank You for replying for my comment

[@SteveGriffith-Prof3ssorSt3v3]

If you are getting a 404 error and you are running a webpack build script then the change in path from webpack is definitely your issue.

[@norbertperka9231]

@@SteveGriffith-Prof3ssorSt3v3 thanks Steve a LOT, I knew it must be something with it I just can't sort it out ,will have to gig dipper in to it

[@norbertperka9231]

probably will try workerbox

[@whatappstatus6937]

Please Talk Slow