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.
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
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
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.
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.
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
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.
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!
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?
Hey there, Steve! Thank you for this video. I have an issue. Set up my local host through vscode Live Server Unregistered sw and reloaded page, following your steps. Then Chrome's Service Workers tab only showed "See all registrations" link, and Edge's Application tab crashed whatsoever... While inspecting HTML file in devtools, I found inline script injected by Live Server. It took precedence over my script and showed its own message in console. I couldn't edit it in devtools, where shows as long as Live Server runs. It would be great if you have some ideas about it. Thank you again for helpfull tutorials!
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.
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
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.
@@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 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
Honestly, This and your other playlists should be gold standard for any youtube educator who creates content for the serious learners. Thank you
Best set of concise and informative tutorials I have found on PWAs and JavaScript.
And I love the almost Bob Ross relaxed delivery. Thanks!
Thank you very much!
Thanks!
Thank you so much for your support!
No one can stop me to listen full series. Awesome I loved the way you delivered.
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.
Thanks Steve!
Thank you very much!! ❤🙏😊
Awesome man, awesome, the way you explained is awesome
Thank you for this series, looking forward to the rest. Great explanations as always!
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
You can be if you come here www.algonquincollege.com/mediaanddesign/program/mobile-application-design-and-development/#overview
😀
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
2:16 😄😆😂🤣 If I can type ".then" super relatable 👌 Awesome series 👍
I think a little introduction into service workers and when they are used would really be helpful.
That's what this whole playlist is about. :)
Such a nice video, thank you so much for making it.
Thank you sir! This is very helpful.
Thank you for your clear explanation
Great explanation for service workers. Loved it! Thank you for your effort.
This was so informative , Thank You!
Great tutorial, thanks.
Thank you for this.
Very interesting! Thank you!
Excelente! gracias Mister!
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.
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.
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
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.
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!
I don't know what the level of support is for service workers in browser extensions for Chrome or Firefox
@@SteveGriffith-Prof3ssorSt3v3 Ahh alright, no issues :)
can i use this as a state manager like zustand or redux in react?
You can build a state management script into a service worker using messaging but it's not really what they are intended for.
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?
The service worker will be on its own thread and all the tabs will share a thread for the scripts on the tabs.
Here is a Playlist about ways to communicate between tabs or windows and service workers
ruclips.net/p/PLyuRouwmQCjk-hvtzQSrCSxBd4S0nOMh9
Hey there, Steve! Thank you for this video.
I have an issue.
Set up my local host through vscode Live Server
Unregistered sw and reloaded page, following your steps.
Then Chrome's Service Workers tab only showed "See all registrations" link, and Edge's Application tab crashed whatsoever...
While inspecting HTML file in devtools, I found inline script injected by Live Server.
It took precedence over my script and showed its own message in console. I couldn't edit it in devtools, where shows as long as Live Server runs.
It would be great if you have some ideas about it.
Thank you again for helpfull tutorials!
Is this still relevant for today tech landscape, I want to use service worker for offline storage and caching some assets.
@siddhant3852 absolutely. Service workers are the core technology behind progressive web apps PWA.
is there any way to communicate between different browsers like from chrome to edge or firefox?
Only through a server-side api
Hi Steve
Just out of curiosity, is there a special reason for having all the logic inside an object (const APP)?
Thank you
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.
@@SteveGriffith-Prof3ssorSt3v3 Thanks! Good to know. So, implementig it on everything is always a good idea? As well as the init on DOMContentLoaded?
@@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
@@SteveGriffith-Prof3ssorSt3v3 Thanks, Steve! This is a true learning channel.
How can I use service workers with typescript in a nextjs app?
That's way too big of a question to answer in a comment
I will be doing some nextjs videos this summer
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
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.
@@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
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.
@@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
probably will try workerbox
Why am I now learning about this?
@@Turnables I would guess that you are learning about PWA
@@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
@@NphiniT sounds like you need a web worker or a shared web worker.
❤
Please Talk Slow