Intro To Service Workers & Caching

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:

Code For This Project:

💖 Become a Patron: Show support & get perks!

Website & Udemy Courses

Follow Traversy Media:

[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.

[adriandinca]

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

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

[iamlisaross]

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

[lolismelolisme]

Thanks Brad, always producing quality content.

[lsd]

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.

[Shipx]

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.

[masnoonjunaid]

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

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

[thanasisathanasi]

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

[tommyatkins]

Best Dev channel I've found on YouTube!

[AegirAexx]

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

[shankerm]

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

[magxtopher]

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.

[supindersingh]

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

[clockwerkz]

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

[srcmake]

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

[sivach]

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

[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.