Intro To Service Workers & Caching
HTML-код
- Опубликовано: 2 авг 2018
- In this video we will learn about service workers and how to use them to cache pages for offline viewing. Service workers are a huge aspect of PWA's or "Progressive Web Apps". We will add a service worker to a tiny sample website so that if the connection goes out, users can still view the pages.
Sponsor:
DevMountain Bootcamp - goo.gl/6q0dEa
Code For This Project:
traversymedia.com/downloads/si...
Node.js Push Notifications Tutorial:
• Push Notifications Usi...
💖 Become a Patron: Show support & get perks!
/ traversymedia
Website & Udemy Courses
www.traversymedia.com
Follow Traversy Media:
/ traversymedia
/ traversymedia 
Наука
![MURDER DRONES Series Finale [TRAILER]](http://i.ytimg.com/vi/p6mhC5Iatns/mqdefault.jpg)
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
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 😁😁😁😁
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.
2 years later, I came here & I'm happy with this tutorial. Thanks Brad.
Thanks Brad, always producing quality content.
Thanks for watching :)
Thanks brad, plz make video about work box toturial
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.
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.
Literally every single video you make is premium god-tier content. Awesome video, thanks for teaching/demoing about caching.
The beauty of Brad's lessons is you come in to learn something and you pick up a dozen new things.
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.
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.
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.
Best video on Service Workers in RUclips! I subscribed in the channel without delay
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!
Best Dev channel I've found on RUclips!
Thank you for this. I've been confused for days. You are the great explainer, Brad 😊
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! :)
Thanks Brad, it's really the best content for the freshers like me.
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.
Most of the time you solve my code problems. Thank you!
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.
Amazing tutorial dude! Learned lot!
Thanks ! I messed for 10 days and finally victorious at this video, God bless you.
Thanks a lot...Not just for delivering great content but also for avoiding annoying and unrelated starting music.
These crash courses are gems. Thank you.
Thanks Brad, your video just solved the last piece of puzzle for me to work on the ERP as web application with PWA implementation.
Great video! Concise, yet detailed, and comprehensive.
Brad deserves more than 1M subscribers, because his videos are so cool... Keep it up brad!
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
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'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
Finally a worth watching channel :), make me feel very happy, Love Mr.Brat god bless you
I have had problems with service workers, but you made it very easy to understand, thank you :3
Thanks Brad giving short but quality information about workers... Keep going on...
Thank you Brad. You made this so easy for me to learn.
This is a great introduction to service workers brad. Thanks 🙏
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)
Service Worker is becoming a big deal these days. Appreciate you doing an intro on this.
thanks for this, by far the best instructions on getting started with service workers!
Excellent video. Very informative and well structured. Thank you for your efforts to produce and share it.
Thank you so much sir! I managed to convert my site to PWA and Chrome showed install prompt after applying your tutorial.
Thanks for vanilla and showing us the basics. Alot of great information. Cheeers.
Thank you so much for this quality content(as always)
Brad, you're great thank you for this tutorial
Brad, you are amazing person! Thank you!
Oh man, you just opened a whole new world of possibility for me.
The best service worker tutorial.
Gracias.
WoW!! Awesome!! Thanks, Brad!
This is very helpful!!
your explanation, concept cases and clean code help better to understand
This is what I have been waiting thanks brad
Awesome work, Brad.
My favorite flavor happens to be _vanilla_ so thanks for serving Brad!
Thank you for this awesome video, I am waiting for next PWA video
Thanks Brad. Keep up your great efforts.
Great overview of Service Workers Brad. Thanks!
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.
Thanks good introduction practical enough more than many I found
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 .... :-)
Great tutorial! Thanks. And props for using plain JavaScript.
Thanks Brad. Like always love your work and thanks for sharing.
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 alot sir for this incredible tutorial the way you teaches is just wow.
Awesome one, so helpful for so many sites!
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!
I literally just learned about these in a podcast I listen to.
Admit it guys, Brad is the best instructor ever
Thanks Brad, you always save the day... to bad RUclips don't have 5 stars rating for channels :(
Quality content. Thanks. From Honduras.
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!
outstanding video, really clear explanation
Great, really simple and on point.
Excellent. Very clear introduction.
This is very helpful. Thank you!
Thank you, very good and well explained.
Thanx for this tutorial....
Always love your work....
Waiting for Webworker tutorial and indexed db
Thanks Brad, this was really helpful!
Brad, always there to save the day.
Wow. Such a valuable tutorial. Thanks Man!
Beautifully explained!
Thanks Brad.. big fan of your channel..
this comes in the right time for me :) thanks
awesome brad has ability to read people's mind
Another solid video, thanks Brad.
Thank you, appreciate your videos.
Much better than Google's Progressive Web Apps (PWA) course on Udacity!
Very well explainded, thanks Brad.
Great explanation. Thanks for the tutorial.
Brad Traversy & Shaun Pelling aka The Net Ninja. It's all anyone needs.
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!
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.
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.
Every new video from Brad gives me a confidence.
Nice! Thanks. I have my vote in for a PWA in react over Vue.
wow bro very useful for my incoming project
Thanks Brad. This helped a lot.
Thank You, Explained nicely
what a cleannnn explanation! thanks
Brad, your videos are great. It will also help if you can write some articles on Medium
Beast as always! Thanks.