I have lost count of how many times my search leads me to your channel. I owe a good part of my dev knowledge and skills to your courses on TH-cam and Udemy. Thanks Brad.
Thank you Brad for always staying up to date and posting regularly! I think that the approach you have used only serves content from the cache when the user is completely offline, but when the user is on a very slow connection the code still goes to the network and does not get the content from the local storage first. It is true that by using this approach you get the latest content no matter what, but PWAs are meant to be fast no matter what the connection type is like, serving the content from the cache and then going to the network would yield faster results. Here is how I would achieve that. Inside the fetch event listener I would respond with e.respondWith( // look for a match inside all caches caches.match(e.request) // if there is a cached version of the request serve that otherwise go to the network .then(response => response || fetch(e.request)) ); I know this video is not exactly about PWAs, but I think the service worker is mainly used with them. Please correct me if I am wrong. P.S. YOU ARE AWESOME! :D
Totally appreciate your comment here. You bring up a really good point and, for the argument you make, you're totally right. I think, tho, there are actually 2 preferences one could have. 1) Like your own, you prefer speed at the cost of a somewhat stingy/sticky cache. 2) A fault tolerant strategy that prefers the latest at the cost of speed. I think it really depends on what the mission of the app ultimately is.
Service workers are an amazing capability that enable PWAs to deliver Store App like capabilities without needing the overhead of inclusion in the Apple, Google or Microsoft Store. Local cache first options mean that PWA apps can function offline after they've been run once from the Browser. They can also be installed to run from a home screen. Over the last few years Google, in particular, have improved the PWA experience to prime time level but all evergreen Browsers do, or will shortly, fully enable other PWA compliance requirements as well Thx Brad. Your great coverage will give us all a better understanding of the skills required to build PWAs . . . starting with the service worker. I ♥ PWAs.
My instructor assigned almost TEN HOURS worth of Indeed videos explaining service workers, and I couldn't really understand them because they were so dry. You managed to explain what they are, what they're used for, and how to implement them in a basic form in half an hour without overloading my monkey-brain. Bravo.
me: on a call with older-school dev explaining service workers to him and that we should use them brad: releases video explaining service workers, youtube notification pops up me: weeps with joy
New isn't better. The other developer is right to not jump on the mindless bandwagon by helping to produce PWA spam. They're probably designing real apps instead of repurposed websites.
For those that were following along and couldn't get the 'sw_cached_site.js' to work, go back in your main.js and make sure the service worker that is registered is pointing to the correct file. Took me a minute lol because I followed this at 1.5x and learned it too! Thanks Brad! :)
Wondering about Service Workers... Going to TH-cam and search for Service Workers... Of course Traversy Media has a short introduction about the subject. Brad, you magnificent beast, I love you! Keep up the awesome work!
Thank you! Your presentation style is sooo clear, your videos are the best! You achive the understanding not by painfully slowing down talking and overexplaining things, but just clearly explaining what's going on, focusing clearly on topic, nothing else, nothing more, nothing less. Can you do a video about client-side databases, especially IndexedDB? Possibly mentioning some in-memory DB solutions, and comparing them, what's best for what. Sorry if you did that already, I couldn't find it yet.
Thank you so much, Brad. I've been learning a lot from your tutorials. Yesterday, I bought your modern javascript at udemy and I can't wait to start it.
Thank you man! This was more than just MANY sanity checks, it literally dig me out of a hole in a couple spots. I only wish you spoke more about the diff better the fetch handler between each Service Worker and elaborate on why you cloned the request in the 2nd strategy. That said, loved the tutorial. Thank you again.
I've bought your courses and learned a lot, I got here again from searching exactly for my search query, your channel has become "thenewboston++" and I love it!
I was trying learn it myself with official docs. The worker was registered successfully but I wasn't getting any logs from service worker. I was trying to find the answers but nether docs, googling nor stackowerflow helped. Couldn't understand what is the problem. But thanks to you I understand I just needed to check that "Preserve log" checkbox. Thanks Brad!
i never came to this channel and left not understanding what i am looking for. before even watching 2 min. Like and i'm sure i will get service workers perfectly (Y)
I was researching about different ad networks and I came to know about MonadPlug advertising network a few weeks ago. The revenue is pretty good for the ad formats I’ve tested (push notifications and native ads). Their live support is super helpful!
Thanks brad for this. You make this fun and enjoyable. You are also a really good tutor. I am wondering why this video doesn't have more than 100,000 views lol. Please keep up the good work
Thanks Brad, But I have a confusion regarding main.js file in main.js you were the only register sw_cached_pages.js. Confusion is that how sw_cached_site.js can works if it not registered in main.js.
Happy Friday to everyone. Thanks Brad for another great one for this latest technology. Now, it forces me stop doing other things and complete this first .... :-)
Guys, what in your opinion makes a somebody a good teacher? I mean, what is the cause? Why do some become so good at explaining things so well and others can't? P.S. Thanks for the video. Ops, the channel. Ops, for doing what you do. Ops for existing. Ops, for having to deal with overenthusiastic comments such as this one.
I have the best subscribers/followers on TH-cam. I genuinely mean that. I have never seen a better, more positive and encouraging audience. I frigging love you guys :)
Thank you for the video, it made possible to build my first cached site! One remark though, instead of caching 'index.html' that led to unreliable behaviour, I ended up using '/', what I've seen done elsewhere, and works steady now. It allowed me to stop using the 'Update on reload' checkbox too.
awesome video Brad, you did it again. will wait for a full flagged React with service workers and push notifications course on udemy or youtube ... keep it up bro.
Nice, thanks for this tutorial, one remark though: technically you don't call events, the browser calls your event handlers, so saying that we call the install event is not correct
Good video Brad, I know I come a liitle late but you should first check if the resource is in the cache before fetching, otherwise you'll be fetching every time instead of using the cached version (in case there is). But understand you wanted to focused on the offline version response. Thank you man.
Hey Brad, Whenever i search for something, firstly i check content from Traversy Media. You are very cool. Thanks a lot. It would be very helpful if any content for CRUD operations to sync to DB whenever we are from offline to online.
Excellent & Excellent & Excellent. No words to say about your technical understanding of the basic things. 2 Basic questions i hv: What Theme Style presently u using in VS code ? Please make another tutorial of basic understanding about the PWA "Manifest" file creation. Thanks in advance sir.
Brad, thank you for keeping it vanilla. Oh, and thank you for teaching us the important stuff that some of us did not even know was important.
well said
I have lost count of how many times my search leads me to your channel. I owe a good part of my dev knowledge and skills to your courses on TH-cam and Udemy. Thanks Brad.
Thank you Brad for always staying up to date and posting regularly!
I think that the approach you have used only serves content from the cache when the user is completely offline, but when the user is on a very slow connection the code still goes to the network and does not get the content from the local storage first. It is true that by using this approach you get the latest content no matter what, but PWAs are meant to be fast no matter what the connection type is like, serving the content from the cache and then going to the network would yield faster results.
Here is how I would achieve that. Inside the fetch event listener I would respond with
e.respondWith(
// look for a match inside all caches
caches.match(e.request)
// if there is a cached version of the request serve that otherwise go to the network
.then(response => response || fetch(e.request))
);
I know this video is not exactly about PWAs, but I think the service worker is mainly used with them.
Please correct me if I am wrong.
P.S. YOU ARE AWESOME! :D
Totally appreciate your comment here. You bring up a really good point and, for the argument you make, you're totally right. I think, tho, there are actually 2 preferences one could have. 1) Like your own, you prefer speed at the cost of a somewhat stingy/sticky cache. 2) A fault tolerant strategy that prefers the latest at the cost of speed.
I think it really depends on what the mission of the app ultimately is.
Best Dev channel I've found on TH-cam!
Service workers are an amazing capability that enable PWAs to deliver Store App like capabilities without needing the overhead of inclusion in the Apple, Google or Microsoft Store. Local cache first options mean that PWA apps can function offline after they've been run once from the Browser. They can also be installed to run from a home screen. Over the last few years Google, in particular, have improved the PWA experience to prime time level but all evergreen Browsers do, or will shortly, fully enable other PWA compliance requirements as well Thx Brad. Your great coverage will give us all a better understanding of the skills required to build PWAs . . . starting with the service worker. I ♥ PWAs.
Thanks a lot...Not just for delivering great content but also for avoiding annoying and unrelated starting music.
2 years later, I came here & I'm happy with this tutorial. Thanks Brad.
My instructor assigned almost TEN HOURS worth of Indeed videos explaining service workers, and I couldn't really understand them because they were so dry. You managed to explain what they are, what they're used for, and how to implement them in a basic form in half an hour without overloading my monkey-brain. Bravo.
me: on a call with older-school dev explaining service workers to him and that we should use them
brad: releases video explaining service workers, youtube notification pops up
me: weeps with joy
New isn't better. The other developer is right to not jump on the mindless bandwagon by helping to produce PWA spam. They're probably designing real apps instead of repurposed websites.
illuminati 😁😁😁😁
You are blessed with explanations of every details and your teaching is easy and simple.But I now know the secrets: Hard work and passion.Thanks.
Thanks Brad, always producing quality content.
Thanks for watching :)
Thanks brad, plz make video about work box toturial
For those that were following along and couldn't get the 'sw_cached_site.js' to work, go back in your main.js and make sure the service worker that is registered is pointing to the correct file. Took me a minute lol because I followed this at 1.5x and learned it too! Thanks Brad! :)
Best video on Service Workers in TH-cam! I subscribed in the channel without delay
Wondering about Service Workers...
Going to TH-cam and search for Service Workers...
Of course Traversy Media has a short introduction about the subject.
Brad, you magnificent beast, I love you! Keep up the awesome work!
Brad deserves more than 1M subscribers, because his videos are so cool... Keep it up brad!
The beauty of Brad's lessons is you come in to learn something and you pick up a dozen new things.
Literally every single video you make is premium god-tier content. Awesome video, thanks for teaching/demoing about caching.
I'm *just* getting to Service Workers in my Udacity Course, this is awesome timing! Thank you Brad!
Same here... I hate this Udacity Course :)
ahhaha #team_udacity here too
Thanks ! I messed for 10 days and finally victorious at this video, God bless you.
Most of the time you solve my code problems. Thank you!
thanks for this, by far the best instructions on getting started with service workers!
These crash courses are gems. Thank you.
Amazing tutorial dude! Learned lot!
Thank you! Your presentation style is sooo clear, your videos are the best!
You achive the understanding not by painfully slowing down talking and overexplaining things, but just clearly explaining what's going on, focusing clearly on topic, nothing else, nothing more, nothing less.
Can you do a video about client-side databases, especially IndexedDB?
Possibly mentioning some in-memory DB solutions, and comparing them, what's best for what.
Sorry if you did that already, I couldn't find it yet.
Thanks Brad! I was a bit afraid of Service Workers but this tutorial made me feel more confident about trying them out.
I have had problems with service workers, but you made it very easy to understand, thank you :3
Service Worker is becoming a big deal these days. Appreciate you doing an intro on this.
your explanation, concept cases and clean code help better to understand
Thanks Brad giving short but quality information about workers... Keep going on...
Thanks Brad, it's really the best content for the freshers like me.
Every new video from Brad gives me a confidence.
Thanks Brad, your video just solved the last piece of puzzle for me to work on the ERP as web application with PWA implementation.
Thank you so much, Brad. I've been learning a lot from your tutorials. Yesterday, I bought your modern javascript at udemy and I can't wait to start it.
Thank you man! This was more than just MANY sanity checks, it literally dig me out of a hole in a couple spots. I only wish you spoke more about the diff better the fetch handler between each Service Worker and elaborate on why you cloned the request in the 2nd strategy. That said, loved the tutorial. Thank you again.
I've bought your courses and learned a lot, I got here again from searching exactly for my search query, your channel has become "thenewboston++" and I love it!
Excellent. Very clear introduction.
Finally a worth watching channel :), make me feel very happy, Love Mr.Brat god bless you
Thank you for the awesome guide. I’ve been having some difficulties in understanding Web workers, but now I have a better understanding thanks to you.
Brad, always there to save the day.
I was trying learn it myself with official docs.
The worker was registered successfully but I wasn't getting any logs from service worker.
I was trying to find the answers but nether docs, googling nor stackowerflow helped.
Couldn't understand what is the problem.
But thanks to you I understand I just needed to check that "Preserve log" checkbox.
Thanks Brad!
😀thanks alot sir for this incredible tutorial the way you teaches is just wow.
The best service worker tutorial.
Gracias.
i never came to this channel and left not understanding what i am looking for.
before even watching 2 min.
Like and i'm sure i will get service workers perfectly (Y)
Now I'm Back after intensive studying for the video.
Masterpiece really easy to follow (Y)
I was researching about different ad networks and I came to know about MonadPlug advertising network a few weeks ago. The revenue is pretty good for the ad formats I’ve tested (push notifications and native ads). Their live support is super helpful!
Thank you so much sir! I managed to convert my site to PWA and Chrome showed install prompt after applying your tutorial.
Thank you for this. I've been confused for days. You are the great explainer, Brad 😊
Thank you Brad. You made this so easy for me to learn.
Admit it guys, Brad is the best instructor ever
This is what I have been waiting thanks brad
Great video! Concise, yet detailed, and comprehensive.
Quality content. Thanks. From Honduras.
Excellent video. Very informative and well structured. Thank you for your efforts to produce and share it.
Thanks brad for this. You make this fun and enjoyable. You are also a really good tutor. I am wondering why this video doesn't have more than 100,000 views lol. Please keep up the good work
Thanks for vanilla and showing us the basics. Alot of great information. Cheeers.
WoW!! Awesome!! Thanks, Brad!
This is very helpful!!
Great tutorial! Thanks. And props for using plain JavaScript.
Thanks Brad, you always save the day... to bad TH-cam don't have 5 stars rating for channels :(
Great overview of Service Workers Brad. Thanks!
Much better than Google's Progressive Web Apps (PWA) course on Udacity!
Oh man, you just opened a whole new world of possibility for me.
Screw those few ones who disliked this video. If they don't get it after watching it, they must be dumb as a rock. Keep up the good content, Brad!
Thanks Brad, But I have a confusion regarding main.js file in main.js you were the only register sw_cached_pages.js. Confusion is that how sw_cached_site.js can works if it not registered in main.js.
Brad, you are amazing person! Thank you!
Thanks Brad. Like always love your work and thanks for sharing.
This is a great introduction to service workers brad. Thanks 🙏
Brad Traversy & Shaun Pelling aka The Net Ninja. It's all anyone needs.
Awesome one, so helpful for so many sites!
My favorite flavor happens to be _vanilla_ so thanks for serving Brad!
Great explanation. Thanks for the tutorial.
Beautifully explained!
Thanks brad, great content.
greetings from syria
Thanks Brad. Keep up your great efforts.
Happy Friday to everyone. Thanks Brad for another great one for this latest technology. Now, it forces me stop doing other things and complete this first .... :-)
Guys, what in your opinion makes a somebody a good teacher? I mean, what is the cause? Why do some become so good at explaining things so well and others can't?
P.S. Thanks for the video. Ops, the channel. Ops, for doing what you do. Ops for existing. Ops, for having to deal with overenthusiastic comments such as this one.
Another solid video, thanks Brad.
outstanding video, really clear explanation
Thanks good introduction practical enough more than many I found
Awesome work, Brad.
It says uploaded 4 min ago. And it already has 27 thumbs up. That's cool!
I have the best subscribers/followers on TH-cam. I genuinely mean that. I have never seen a better, more positive and encouraging audience. I frigging love you guys :)
Traversy Media that’s a great reflection on you Bro!
Thank you for the video, it made possible to build my first cached site!
One remark though, instead of caching 'index.html' that led to unreliable behaviour, I ended up using '/', what I've seen done elsewhere, and works steady now. It allowed me to stop using the 'Update on reload' checkbox too.
awesome video Brad, you did it again. will wait for a full flagged React with service workers and push notifications course on udemy or youtube ... keep it up bro.
Thanks Brad. This helped a lot.
Thank you for this awesome video, I am waiting for next PWA video
Nice, thanks for this tutorial, one remark though: technically you don't call events, the browser calls your event handlers, so saying that we call the install event is not correct
Vanilla is the best flavour...Great video
Thanks Brad, this was really helpful!
Thanks Alot For This Tutorial Brad.
Good video Brad, I know I come a liitle late but you should first check if the resource is in the cache before fetching, otherwise you'll be fetching every time instead of using the cached version (in case there is). But understand you wanted to focused on the offline version response. Thank you man.
Thank you so much for this quality content(as always)
I literally just learned about these in a podcast I listen to.
Thanks Brad.. big fan of your channel..
An eye opener... thanks a mil.
Wow. Such a valuable tutorial. Thanks Man!
what a cleannnn explanation! thanks
Great, really simple and on point.
Hey Brad, Whenever i search for something, firstly i check content from Traversy Media. You are very cool. Thanks a lot. It would be very helpful if any content for CRUD operations to sync to DB whenever we are from offline to online.
Brad, you're great thank you for this tutorial
this comes in the right time for me :) thanks
awesome brad has ability to read people's mind
Excellent & Excellent & Excellent. No words to say about your technical understanding of the basic things.
2 Basic questions i hv: What Theme Style presently u using in VS code ?
Please make another tutorial of basic understanding about the PWA "Manifest" file creation.
Thanks in advance sir.
But what is the difference between the cacheStorage and just normal old browser cache?
Can I store sensitive user data in the cacheStorage?