Intro To Service Workers & Caching
ฝัง
- เผยแพร่เมื่อ 30 ก.ย. 2024
- 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.c...
Node.js Push Notifications Tutorial:
• Push Notifications Usi...
💖 Become a Patron: Show support & get perks!
/ traversymedia
Website & Udemy Courses
www.traversymed...
Follow Traversy Media:
/ traversymedia
/ traversymedia
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
Thanks Brad, always producing quality content.
Thanks for watching :)
Thanks brad, plz make video about work box toturial
Does anyone have the same error?
sw_cached_site.js:37 Uncaught (in promise) TypeError: Request method 'POST' is unsupported
at self.addEventListener.e.respondWith.fetch.then.caches.open.then.cache (sw_cached_site.js:37)
also,
sw_cached_site.js:37 Uncaught (in promise) TypeError: Request scheme 'data' is unsupported
at self.addEventListener.e.respondWith.fetch.then.caches.open.then.cache (sw_cached_site.js:37)
have u set your new file into main.js file ?
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 TH-cam and Udemy. 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 😁😁😁😁
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.
Amazing tutorial dude! Learned lot!
Hello Brad, I have a question bordering me so much, how to you develop a website and an app that anytime a user does any activity on the website, it appears on the mobile app and vice versa. E.g Anytime someone subscribe to a youtube channel, like or comment on a video a on their phone using the youtube app, the person will be able to see those like, subscription and comment they made on those video when the user log into his account using youtube website. Hope you can help me out, or probably you make a video on it. Thanks Brad
Best video on Service Workers in TH-cam! I subscribed in the channel without delay
Is it just me or Brad actually did not show the part that registers the cached_site JS file in the main.js?
PWA stuff, noiice!
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!
Hi Brad, your video is so cool, this help me know more about the way service worker working on. Do you have any plan to make an video for using workbox to cache?
Most of the time you solve my code problems. Thank you!
But what is the difference between the cacheStorage and just normal old browser cache?
Can I store sensitive user data in the cacheStorage?
Awesome Brad, could you follow this vanilla version up with a Workbox video? 😁
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!
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.
Best Dev channel I've found on TH-cam!
06:22 get started
Thanks Brad, great stuff as usual. Can service workers handle storing user input and sending to API when connection is reestablished?
Can we somehow refresh our page automagically without updating sw.js file?
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.
Hey, great tutorial, but i have an error.
sw_cached_site.js:37 Uncaught (in promise) TypeError: Request method 'POST' is unsupported at sw_cached_site.js:37
The code in question would be this:
caches.open(cacheName).then(cache => {
// Add response to cache
cache.put(e.request, resClone);
});
Hey.
I downloaded the source code and run a local server with python -m http.server 8000 from the source folder.
I got an error while registering :
- on Chrome: The script has an unsupported MIME type ('text/plain').
- on Firefox: Error: SecurityError: The operation is insecure.
Could you PLEASE help me ?
Thank you, and nice video
self.addEventListener('fetch' not working for dynamic 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
Attention! If you'll get an error like *Request scheme 'chrome-extension' is unsupported at sw.js* , add this to your code, before the e.respondWith inside the fetch eventListener:
if (!e.request.url.startsWith('http') && !e.request.url.startsWith('https')) { return; }
It checks if the request URL is either http or https and if not, returns. Because otherwise, your Service Worker would try to cache some chrome-extension:// files.
Source: stackoverflow.com/questions/49157622/service-worker-typeerror-when-opening-chrome-extension
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.
Hi, thanks for the tutorial, i followed all steps, an idea about this error?
Uncaught (in promise) TypeError: Failed to execute 'put' on 'Cache': Request method 'POST' is unsupported
Thanks again
I'm getting this error after deploying - TypeError: Failed to execute 'put' on 'Cache': Request scheme 'chrome-extension' is unsupported. Though the same is working on edge browser. Anyone came across this issue
What caching is being used? Doesn't there exist multiple types of caching? Is there a default one for vanilla JS? Have you heard about IndexedDB?
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.
Why is the sw_cache_site.js working although you didn't register it like you registered sw_cache_pages.js?
I get a "Uncaught TypeError" error on line 4 of main.js file. Cannot read property 'serviceWorker' of undefined
at main.js:4
Great tutorial, thanks!
One question: you've changed service worker js file (*_pages.js to *_site.js) but what wasn't shown is a registering this new file.
Did I miss something? They aren't working both, right?
Yes , I have the same question. *.site.js registering was not shown in the video , how it ran ?
Hi, just want to know that does this code works to improve speed of site loading, if not then please help me to improve site loading speed code.
How about something useful instead of PWA spam, like a way to effectively boycott PWAs that sneaked their way into app stores...
The code is no longer available :(? I added the second code and started receiving a websocket error. I deleted the second file/code and the error stayed. It does .. work just, with an error. Which can't be right. I wanted to look at your code and see if I'd find any differences. Would it be possible to upload it again?
Thank you very much sir. Now I understand what a service worker is. Sir, I want to know, will the transactions (purchase) work while we are offline?
Hey..
I saw a web app.. their app works offline like this service worker.. but they have a database connected... and when the internet is back their data is synced from local to live server. Just curious if you know anything about this.
Thanks
11:17 : I've got a : A bad HTTP response code (404) was received when fetching the script.But my script have the correct name, place in the correct folder and the root is correct, same for the code is correct
Your explanation does not seem to be unto the mark. It sounds irritating and boring. Please rework on your communication skills. You are simply typing the code and speaking without pauses.
The best service worker tutorial.
Gracias.
Much better than Google's Progressive Web Apps (PWA) course on Udacity!
I made a github repo for this example since Brad doesn't have one:
github.com/Nermin99/service-worker-example/
Hey Brad, thank you so much for the video on Service Workers. Could you please do a tutorial on developing chrome extensions with NodeJS and React? It will be very helpful :) Thanks and take care :)
Excellent stuff as always can you use service worker to cache moodle 3.5 sites?
when you load sw_cached_site.js ?
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
Why Promise.all() is used here couldn't understand in removing old cache Can anyone make me understand
2 years later, I came here & I'm happy with this tutorial. Thanks Brad.
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?
WoW!! Awesome!! Thanks, Brad!
This is very helpful!!
How could I know if the data which response is correct? if there's something wrong with the page, will the cache keep the wrong data?
Thank you for this awesome video, I am waiting for next PWA video
Thanks brad it was very helfull
What if user requesting same html page when he is online
will browser requests to server or it will serve from cache ??
@Traversy Media
Can we cache the template files with .handlebars extension?
easy to understand as always. I am new to JS, can you help me to understand "self" keyword used here.
Is the service worker cannot cache math es6 js module file? It always shows error when sw cache match it.
Why is it that in the second method, when you cache the whole site, you do it in the 'fetch' request and not the 'install' request? If you visit the site and then lose internet, then you dont have your cache filled.
19:33 i'm dying from laughing so hard :)))) btw, this tutorial is awesome. Thanks for sharing us some knowledge. Great job
haha, another instance of why Brad is awesome...i never knew that stupid thing had a game to it. Knowledge on-top of knowledge!!
What's the limit of the size of that cache? In other words, how big of a website can I put into it?
I had a question if I bookmark a site which was cached when I open that will it load the site when offline
Please make a tutorial an PWA.
😀thanks alot sir for this incredible tutorial the way you teaches is just wow.
Wow, I didn't know that tool. Fantastic. Can we do it the same on server side?
Great vid sir!👍👍👍 Thank you very much!🤟😎
Nice! Thanks. I have my vote in for a PWA in react over Vue.
thanks brad. i was struggling to understand the concept
Thanks brad, great content.
greetings from syria
Great tutorial... Next Laravel series or E Commerce website using Laravel will be highly appreciated
mobsted.com is the newest PWA apps making platofrm
19:33 Brad be like. we have let go the dinosaur guys ! :(
what to do if index.html itself is being cached ??
Vanilla is the best flavour...Great video
My favorite flavor happens to be _vanilla_ so thanks for serving Brad!
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!
Brad, you are amazing person! Thank you!
Thanks Brad, it's really the best content for the freshers like me.
Code For This Project link is not working.
Hey Brad, Just wanna clarify a couple of things:
1. Any particular reason why you're using 'self' instead of plain 'window'?
2. Why do you use Promise.all when inside that there's only one promise?
3. I'm new to SW and caching stuff so I just wonder what the methods 'e.waitUntil' and 'skipwaiting' do.
Thank you so much sir! I managed to convert my site to PWA and Chrome showed install prompt after applying your tutorial.
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.
12:50 I saw another tutorial which uses this.addEventListener() and not self.addEventListener() in the service worker file. Is there any difference? Which object does this/self actually point to?
so I wont be able to play dyno the dyanosaurs game then ..
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 for this, by far the best instructions on getting started with service workers!
I got this error during the process "TypeError: Request scheme 'chrome-extension' is unsupported"
Solution was to disable my chrome extensions. I have vue dev tools, wappalyzer and some others which were interfering with the process
Thanks ! I messed for 10 days and finally victorious at this video, God bless you.
Run into an issue when using this in my express app. I put the service worker js-file in my js-folder inside public, but the install event did not fire. Be sure to put the service worker file directly in the public folder because of this scope issue :D
For a classic chat app - ie historical incoming and outgoing messages retained , permanently authenticated /logged in would a native app still be better than something created using wpa? Notifications offered by pwa seem would to cover incoming chat . Pwa means no separate ios /android app. Complete noob 2 pwa so just asking
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.
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 great video. Thanks a lot....
thanks for sharing this Brad, really useful information very well explained. ;)
Brad, you're great thank you for this tutorial
Hi Brad, often during development I have to clear my cache for any changes in my code to take affect. Will my users run into the same issue if I make changes to a live PWA?
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.