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.
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 RUclips and Udemy. 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.
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.
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! :)
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.
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!
Wondering about Service Workers... Going to RUclips 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!
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 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.
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.
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'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!
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.
My goal is to become a web designer, friends are laughing at me because I always work on css (flexbox and grid) and they laugh at me learning flexbox all the time. Thanks to you for your hard work done on your various content on this channel. Love your coding way.
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.
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.
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 RUclips. I genuinely mean that. I have never seen a better, more positive and encouraging audience. I frigging love you guys :)
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.
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.
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 .... :-)
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
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.
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
hey brad, with this type of video format(the slide part), if u raise the bottom black box just few pixel higher it would be perfect with youtube subtitle
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.
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.
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 RUclips and Udemy. 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.
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.
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! :)
2 years later, I came here & I'm happy with this tutorial. Thanks Brad.
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 😁😁😁😁
The beauty of Brad's lessons is you come in to learn something and you pick up a dozen new things.
Thanks ! I messed for 10 days and finally victorious at this video, God bless you.
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 a lot...Not just for delivering great content but also for avoiding annoying and unrelated starting music.
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!
Service Worker is becoming a big deal these days. Appreciate you doing an intro on this.
Thanks Brad, always producing quality content.
Thanks for watching :)
Thanks brad, plz make video about work box toturial
Best Dev channel I've found on RUclips!
Wondering about Service Workers...
Going to RUclips 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!
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 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.
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
Best video on Service Workers in RUclips! I subscribed in the channel without delay
Brad deserves more than 1M subscribers, because his videos are so cool... Keep it up brad!
Thanks Brad! I was a bit afraid of Service Workers but this tutorial made me feel more confident about trying them out.
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, 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 sir! I managed to convert my site to PWA and Chrome showed install prompt after applying your tutorial.
Every new video from Brad gives me a confidence.
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 have had problems with service workers, but you made it very easy to understand, thank you :3
Most of the time you solve my code problems. Thank you!
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!
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.
My goal is to become a web designer, friends are laughing at me because I always work on css (flexbox and grid) and they laugh at me learning flexbox all the time. Thanks to you for your hard work done on your various content on this channel. Love your coding way.
thanks for this, by far the best instructions on getting started with service workers!
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.
Admit it guys, Brad is the best instructor ever
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.
Much better than Google's Progressive Web Apps (PWA) course on Udacity!
Thanks Brad giving short but quality information about workers... Keep going on...
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.
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!
My favorite flavor happens to be _vanilla_ so thanks for serving Brad!
Brad Traversy & Shaun Pelling aka The Net Ninja. It's all anyone needs.
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.
Oh man, you just opened a whole new world of possibility for me.
These crash courses are gems. Thank you.
Thanks Brad, it's really the best content for the freshers like me.
your explanation, concept cases and clean code help better to understand
Brad, always there to save the day.
Thanks Brad, you always save the day... to bad RUclips don't have 5 stars rating for channels :(
Amazing tutorial dude! Learned lot!
Excellent. Very clear introduction.
It says uploaded 4 min ago. And it already has 27 thumbs up. That's cool!
I have the best subscribers/followers on RUclips. 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!
😀thanks alot sir for this incredible tutorial the way you teaches is just wow.
Finally a worth watching channel :), make me feel very happy, Love Mr.Brat god bless you
Great tutorial! Thanks. And props for using plain JavaScript.
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.
I literally just learned about these in a podcast I listen to.
Vanilla is the best flavour...Great video
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.
The best service worker tutorial.
Gracias.
Thanks for vanilla and showing us the basics. Alot of great information. Cheeers.
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.
Great video! Concise, yet detailed, and comprehensive.
Great tutorial... Next Laravel series or E Commerce website using Laravel will be highly appreciated
Excellent video. Very informative and well structured. Thank you for your efforts to produce and share it.
Great explanation. Thanks for the tutorial.
Brad, your videos are great. It will also help if you can write some articles on Medium
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 .... :-)
thanks brad. i was struggling to understand the concept
Great overview of Service Workers Brad. Thanks!
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. Like always love your work and thanks for sharing.
WoW!! Awesome!! Thanks, Brad!
This is very helpful!!
Nice! Thanks. I have my vote in for a PWA in react over Vue.
Thanks Alot For This Tutorial Brad.
Thanks Brad. This helped a lot.
Thanks brad, great content.
greetings from syria
Quality content. Thanks. From Honduras.
This is a great introduction to service workers brad. Thanks 🙏
Brad, you are amazing person! Thank you!
Thank you for this awesome video, I am waiting for next PWA video
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.
Thanks good introduction practical enough more than many I found
Beautifully explained!
This is what I have been waiting thanks brad
An eye opener... thanks a mil.
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
Thanks Brad, this was really helpful!
Awesome one, so helpful for so many sites!
Very easy to understand
hey brad, with this type of video format(the slide part), if u raise the bottom black box just few pixel higher it would be perfect with youtube subtitle
Nicely explained. thanks
I'd love to see a tutorial about SW and offline Google Analytics.
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.
outstanding video, really clear explanation
Awesome work, Brad.
Another solid video, thanks Brad.