Intro To Service Workers & Caching

[@taariqq]

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.

[@shekharaakula6233]

well said

[@hamzajirah]

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 KZbin and Udemy. Thanks Brad.

[@Shipx7]

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.

[@adriandinca5682]

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

[@OnePieceWonPeace]

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.

[@thetechnerdco]

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! :)

[@overthinkinglisa]

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

[@StijnHommes]

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.

[@EnglishTurkishExpert]

illuminati 😁😁😁😁

[@lsd22252]

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.

[@claudwatari]

2 years later, I came here & I'm happy with this tutorial. Thanks Brad.

[@shankerm3959]

The beauty of Brad's lessons is you come in to learn something and you pick up a dozen new things.

[@lolismelolisme7546]

Thanks Brad, always producing quality content.

[@TraversyMedia]

Thanks for watching :)

[@mooodddy1]

Thanks brad, plz make video about work box toturial

[@masnoonjunaid]

Thanks ! I messed for 10 days and finally victorious at this video, God bless you.

[@AegirAexx]

Wondering about Service Workers... Going to KZbin 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!

[@srcmake]

Literally every single video you make is premium god-tier content. Awesome video, thanks for teaching/demoing about caching.

[@samachema]

Service Worker is becoming a big deal these days. Appreciate you doing an intro on this.

[@magxtopher1332]

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.

[@thanasisathanasi4965]

Best video on Service Workers in KZbin! I subscribed in the channel without delay

[@sivach8667]

Thanks a lot...Not just for delivering great content but also for avoiding annoying and unrelated starting music.

[@adryanyudhatrisna1944]

Brad deserves more than 1M subscribers, because his videos are so cool... Keep it up brad!

[@tommyatkins4806]

Best Dev channel I've found on KZbin!

[@gabiold]

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.

[@KevinSheppard]

Thanks Brad! I was a bit afraid of Service Workers but this tutorial made me feel more confident about trying them out.

[@eacarvalho]

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.

[@clockwerkz]

I'm *just* getting to Service Workers in my Udacity Course, this is awesome timing! Thank you Brad!

[@forrestang]

Same here... I hate this Udacity Course :)

[@rafaelxrafael]

ahhaha #team_udacity here too

[@bitcode_]

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!

[@AneesKhan-uz4mz]

Admit it guys, Brad is the best instructor ever

[@hnasr]

Amazing tutorial dude! Learned lot!

[@sumitkumarsingh9202]

Thanks Brad, it's really the best content for the freshers like me.

[@varletconstundefined]

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)

[@varletconstundefined]

Now I'm Back after intensive studying for the video. Masterpiece really easy to follow (Y)

[@OnePieceWonPeace]

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.

[@serhiimamedov]

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!

[@milosh996]

These crash courses are gems. Thank you.

[@Q6ri1990]

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.

[@AneesKhan-uz4mz]

Finally a worth watching channel :), make me feel very happy, Love Mr.Brat god bless you

[@jagadeeshmanoharan9613]

Every new video from Brad gives me a confidence.

[@peterfeng208]

Thanks Brad, your video just solved the last piece of puzzle for me to work on the ERP as web application with PWA implementation.

[@OfficialChoiceTV]

Oh man, you just opened a whole new world of possibility for me.

[@omegakofi2605]

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!

[@sunkanmifafowora9402]

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

[@dibils]

thanks for this, by far the best instructions on getting started with service workers!

[@supindersingh8882]

Most of the time you solve my code problems. Thank you!

[@axelruiz3015]

I have had problems with service workers, but you made it very easy to understand, thank you :3

[@karlheinzneugebauer]

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!

[@sasayaki]

Thank you for this. I've been confused for days. You are the great explainer, Brad 😊

[@singaporestreettravel]

Thanks Brad giving short but quality information about workers... Keep going on...

[@sourandbitter3062]

Brad, always there to save the day.

[@adante407]

Brad Traversy & Shaun Pelling aka The Net Ninja. It's all anyone needs.

[@zen-ventzi-marinov]

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.

[@JimmyBOnYouTube]

My favorite flavor happens to be _vanilla_ so thanks for serving Brad!

[@HaraldEngels]

Excellent video. Very informative and well structured. Thank you for your efforts to produce and share it.

[@DavidJohnson-hb6gh]

Great video! Concise, yet detailed, and comprehensive.

[@skilled-person]

Thanks Brad, you always save the day... to bad KZbin don't have 5 stars rating for channels :(

[@RabbaniRasha]

Thank you so much sir! I managed to convert my site to PWA and Chrome showed install prompt after applying your tutorial.

[@jellycoding]

It says uploaded 4 min ago. And it already has 27 thumbs up. That's cool!

[@TraversyMedia]

I have the best subscribers/followers on KZbin. I genuinely mean that. I have never seen a better, more positive and encouraging audience. I frigging love you guys :)

[@onecarwood]

Traversy Media that’s a great reflection on you Bro!

[@Mvrck44]

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.

[@MULTICODE]

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.

[@billypentester]

your explanation, concept cases and clean code help better to understand

[@IngenieroJorgeIvan]

The best service worker tutorial. Gracias.

[@olowolafemodupe6583]

Thank you Brad. You made this so easy for me to learn.

[@vicjtav]

This is a great introduction to service workers brad. Thanks 🙏

[@ManeelxAkosAdor]

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.

[@jamalabdullahi8155]

This is what I have been waiting thanks brad

[@kbcarte420]

I literally just learned about these in a podcast I listen to.

[@malikgenius4u]

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.

[@kazinayem2011]

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.

[@RickBeacham]

Thanks for vanilla and showing us the basics. Alot of great information. Cheeers.

[@lightinthedark5708]

WoW!! Awesome!! Thanks, Brad! This is very helpful!!

[@rutwickgangurde3247]

Great tutorial! Thanks. And props for using plain JavaScript.

[@davidconnelly]

Awesome work, Brad.

[@kevinzhang8974]

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 .... :-)

[@AbhishekKumar-mq1tt]

Thank you for this awesome video, I am waiting for next PWA video

[@pegasusteam]

Great overview of Service Workers Brad. Thanks!

[@KonstantinJivkov]

Brad, you are amazing person! Thank you!

[@aashirkhan5172]

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.

[@georgekrax]

Much better than Google's Progressive Web Apps (PWA) course on Udacity!

[@lostheptapod6382]

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

[@sphengle]

Excellent. Very clear introduction.

[@marioleon86]

Thanks good introduction practical enough more than many I found

[@HI-wq5vh]

Thanks Brad. Like always love your work and thanks for sharing.

[@irrefl1672]

Quality content. Thanks. From Honduras.

[@pravinkumar-lz2jm]

Thank you so much for this quality content(as always)

[@domaincontroller]

06:22 get started

[@bhabanishankardash1443]

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.

[@praveenreddyadelli8094]

Brad, your videos are great. It will also help if you can write some articles on Medium

[@ABNATIONProgrammerz553]

Great tutorial... Next Laravel series or E Commerce website using Laravel will be highly appreciated

[@gopinathkrm58]

Thanks Brad. Keep up your great efforts.

[@YoavRheims]

I'd love to see a tutorial about SW and offline Google Analytics.

[@CarltonJosephLv]

Nice! Thanks. I have my vote in for a PWA in react over Vue.

[@logkdogk]

Awesome one, so helpful for so many sites!

[@Xandr017]

outstanding video, really clear explanation

[@11211211T]

Beautifully explained!

[@reassume4826]

Wow. Such a valuable tutorial. Thanks Man!

[@HarshSingh-hk8fe]

😀thanks alot sir for this incredible tutorial the way you teaches is just wow.

[@shahzaibkhan-md9xw]

Brad, you're great thank you for this tutorial

[@mirzasisic]

PWA stuff, noiice!

[@madebylewis]

Awesome Brad, could you follow this vanilla version up with a Workbox video? 😁

[@swoorp]

I guess you had hours of fun in just 5 seconds... Anyways, love the video as all of your vids

[@IamMclov1n25]

Another solid video, thanks Brad.

[@eddie_writes96]

Hey man I love the content, I've learned so much from you! When it comes Django, your the man to go to! One thing that confuses me about this tutorial is that once I get to fetching the cached data, It doesn't fire. Could you help a brother out?

[@vivekvanga3588]

Thanks Brad.. big fan of your channel..

[@ankursaini5342]

Thanx for this tutorial.... Always love your work.... Waiting for Webworker tutorial and indexed db