Angular Service Worker Tutorial
HTML-код
- Опубликовано: 5 июн 2018
- Learn how to add a service worker to your Angular (Angular 2+) app to make it available offline. Service workers can be tricky to configure correctly but with the official Angular service worker package, it'll actually be a breeze.
----------
Code & Further Links can be found on: www.academind.com/learn/angul...
Official docs: angular.io/guide/service-work...
Want to learn something totally different? Check out all other courses: academind.com/learn/our-courses
----------
• You can follow Max on Twitter (@maxedapps).
• And you should of course also follow @academind_real.
• You can also find us on Facebook.( / academindchannel )
• Or visit our Website (www.academind.com) and subscribe to our newsletter!
See you in the videos!
----------
Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice! 
Наука
I have to work on a new project soon, and I realized that the users will have connectivity issues while using it, as it's supposed to be used on the road.
An approach similar to this will allow me to sync that content when switching from online to offline and viceversa.
Thanks a bunch Max, you are a great instructor!
Just what I was looking for. You are among the best tutors, Max. Thanks :)
Thanks so much Debmallya, I really appreciate your great feedback!
You are awesome! I was looking for this, and it improved my google performance rate.
Max is my Angular father :3
Thank you Max! You contributed to save my life! Again!
Thank you for the crisp and clear explanation !
Never disappoints. Great explanation.
Thanks Max, as always a great video and well explained. Cheers!
Happy to read that you like it Ivan, thank you so much!
Great tutorial!
So happy to read that you like it, thank you!
Thank you for such a meaningful video!
Good Job Max. Thanks!!
Pretty awesome, I appreciate the content of your tutorial, thanks a lot.
This was very helpful! Thanks!
You cover too many concepts in a few minutes. Awesome job. You are a true front end genius
Can you please add push notification implementation in this video
.
Keep up the good work man!!
still actual and still one of the best explanations
extremely cool guide! thanks a lot!
You are Great, Max!!! :D Thank you!!!
Thanks for such useful information!
Thank YOU for your comment, happy to read that you like it!
Very helpful. Thanks Max!
Happy to read that Jared, thank you!
Max is simply the best teacher ever
YOU are the best Joachim, thank you very much for your fantastic feedback!
Thanks a lot
Very very helpful 😊
Great explanation thank you.
Very useful Max... Thanks...
Thank you so much for your tutorials :)
Thank YOU for your support!
Max could you please tell what's the difference between caching using service worker and one using manual caching in map object? And Which one is better approach.
Thank's again Max
Hey @maxi
Can we implement "background sync" feature in our angular app?
Thank You, Max!
Thank YOU for your awesome support :)
Thank you sir!
Please make a course on PWA with angular. A fully fledge angular application with off-line support, push notifications, data sync and other mobile capabilities. The one you created earlier not only is a little bit outdated but it is also in plain JavaScript. 😑
Hi Max, Could you please make an image capturing app which covers these points:
(a)Fetching the image from a server.
(b) Posting the captured image on the server.
(c) Restoring the image if it’s captured in offline mode.
(d) Deleting the captured image while preserving the copy on the server.
(e) Restoring a picture from the server and save it locally.
With PWA supporting feature using Angular 6
thx bro, was halpfull
You are always great
awesome explanation.
Beautiful presentation Mr. Max the guru.
Thanks a lot Mick!
was helpful!
Hi Max:
Love your videos (and I'm a dedicated Academind customer over on Udemy)...
There's big confusion at the 10m 55s mark, where you say: "If I now tick offline again, it still reloads, right?"
But -- it's clearly not reloading. Did I miss something? It's really NOT reloading, right?
Was this just an re-shoot/edit problem?
This was really good. I understood very well.
But i was also expecting when we say Service worker, Background Sync should also be a part of service worker. I am sorry iam wrong in asking that. Or do you have seprate link for that Background Sync in angular?
Tons of thanks
thank you max lot of information
Thanks so much for your great feedback :)
I would like to implement Firebase Cloud Messaging into my project which already has installed Angular Service worker, how to I can use both service workers?, Do you have any course that explains this setting?. Basically I need send push notification ans also make caching, Any other solution?.
Thanks!!
Wow! Angular's support for PWA is awesome!
It's indeed very simple :)
I really appreciate the simplicity of it. One thing I would like to do is add "clients.claim()" to the "activate" event so that service worker will take over the first time the page loads. Can I achieve that through settings?
This is gold!
Thanks so much, just fantastic to read that!
Max is the best!
YOU are the best Marc, thank you for your support!
Hello max, to put this files on a real server, is only copy the files of dist folder ? I maked this and don't it worked, but on the localhost works. You can help me?
So if there is any changes in the files that are being served, the service worker will automatically update the version of the application and serve the new files. But does it need to be built again? (ng build?)
Excellent explanation of service workers
Thanks a lot!
Hi Max, thank you so much for this video! absolutely great!.
I've implemented Service Worker in my Angular application.
Testing with lighthouse I notice a decrease on performance, especially when testing for mobile device.
Performance value without Service Workers: 39% (mobile mode)
Performance vale with Service Worker: 25% (mobile mode)
I've tried to reduce the amount of elements to cache, now I'm caching only assets/images but the result is the same.
Could you help me?
Thank you so much!
Great vedio
So I followed this step by step (running with 7 now) and when I run the site with http-server I'm not getting any errors but it also appears I'm not getting the service worker. Any ideas why?
I just come across your Service Worker Ved. Thanks for sharing your knowledge, really helpful. My question is that we are in offline mode, end user dose not know that data is coming offline,( neither he should be concerned about it), he put his comment to a particular post! what will happen in this case, what i guess is service worker is just some sort of making dynamic contents to be static saving them in arrays ( whatever ). Am I correct , please correct me If i am not ( new learner looking for offline angular apps solution for dynamic apps ), Thanks in advance!
If new version of application available then Is it possible to show "do you want to load new version" ? in popup with 2 button that is yes or no. If we click on yes then new version will load.
I tried the same method but instead of http-server I am using Amazon s3, the service worker doesn't seem to start in the browser. Can anyone help?
Can you use cacheConfig on the assetGroups?
Thank you. Vue PWA plz too!
Superb , Great help for amy app
So cool to read that Faisal, thanks a lot for sharing this!
cool! tks!!
Super like, Great Tutorial
Thank you Shubham!
hi, I follow all your videos on angular because they are short and easy to understand. I need help, I want to get a list of available Wi-Fi using an angular app that will allow connecting using a wifi password. Can you make a video on it?
Thanks
I'm using angular 11, and followed the steps you mentioned here. But still service worker not running in production build. Could you please help me
Does this work with angular 5 ?
So you can only really cache responses from websockets ? Might seem dumb, but i was under the impression that you could cache subscribers that were getting responses from webscockets ?
If someone could help me clear my confusion that would be helpful haha.
Please provide more videos on service workers
Video was good but when i tried to integrate service worker with Asp.net MVC applicaton thn it didn't work.
As per my investigation it doesn't have configuration for deploy url.
Let me know, if u work with angular mvc project.
I have a question. Is it also possible to cache POST requests? For example: app is offline you submit a form and it saves data to cache and once you have the connection again it sends the data from the cache.
It is, but it's rather complicated. Max has a great course on PWA's on Udemy where he handles this. You should check it out.
I can't find the code repo link in the description. Where can I find it?
Getting 504 error when the dataGroup is updated in ngsw config file. API is not cached. Can anybody please share your suggestions?
Even that service worker is now registered, the page says "This page isn't working. localhost took too long to respond. HTTP ERROR 504". and I don't see a single network call for any of the resources. Please help.
Does it work on angular 4 ??
Datagrup section of ngw-config.json file every time autogenerate code by how programmatically solve while building angular application all data groups section auto-fill the attributes . manual process is not working production build
You're my favourite I have some of your Udemy courses
It really makes me happy to read that Ben, thanks a lot for your support here and on Udemy!
where can i read about navigationUrls?
How to get 2 different data models from different APIs
Thank you Max for another awesome video. I have learned so much from you here on YT as well as on Udemy.
I have a question: I got this to work awesome locally, testing a prod build with http-server. But, when I upload my app to my Nginx server, and restart the Nginx server...I can see the manifest info in Chrome for the app...but it does not seem to be any service workers when I run it from the server. Any ideas?
FYI:
I have this base href setting in my index.html file:
Also, I am using "HashLocationStrategy". Not sure if this has to do with it...
Thanks for your nice feedback! I can't really help on that issue though unfortunately. I deployed a couple of apps with Service Workers to static hosts like Firebase Hosting or S3 and had no issues. It's probably some server config but I'm not a server admin at all :/
Thank you for your quick reply. Will see what I can come up with :-)
Just in case someone else watching this experience what I have...it seems that you have to have an SSL server for the Service Worker to work on other than localhost. This is not required for localhost. So, in my case...this being an internal web app in my company, go to get with the Unix guys :-)
If he is the tutor, i am learning this course. Big Fan of Max
After watching this video, before I knew it, my webapp was already offline-compatible. Now I have killed the server and the app is working perfectly.. .. and I kinda don't know how to get rid of it hahah
how can we cache CDN files using serviceworker
Hi. i'm traveling to my town (where there is no wifi) for a week and i want to take the REST API with Node.js course, so i decided to download all the videos and create the basic project setup with all the npm packages installed. is there anything else that i need to install or that's it thanks.
make sure you have installed all the package you need from packages.json you can install the packages with 'npm install' and run your app for onces to make sure it works. I also recommend installing postman so you can test your API.
thank you very much.
Doesnt PWA require HTTPS ? So iam wondering why an http server could work here.
how to write code in service workers?
Hi Max
I facing problem in service worker while routing the page.
base url : myBaseurl.com if i refersh is works offline but
if i refresh url like : myBaseurl.com/#/myBooking here its not working please guilde me..
What solun. i found in google:- in NGSW-confi.json(is this correct file)
added:-
"routing":{
"routes":{
"/": {
"match": true
},
"/myBooking ":{
"match": "prefix"
},
"/mylist":{
"match": "prefix"
}
}
}
but its not woring while go another page please help me ...how to maintain service worker while routing offline
Would using a service worker to make an Angular app multi threaded make sense? For example, offload a compute heavy task to the service worker to prevent the UI from being blocked?
You can use a web worker for that. A service worker is a specialized version of that which you should use for caching, push notifications etc. It also runs (on mobile devices with Chrome) when the web page is not loaded. A web worker is coupled to the web page in a tighter way and a great tool for offloading work
Thanks! Maybe a topic for another video! 😁
Nice explanation. Thank you.
Great to read that Mayank, thank you!
Awesome video
I did same every thing works fine . I hosted application in tomcat like domain.com/portal/ here portal is my application when I refresh the page it goes 404 not found .But when I added index.html then it is working . When saw domain.com/portal/login it is expecting from service worker /login is my routing . Please guide me how to resolve this issue
Hi Max. Have you ever tried to get service worker stuff to work on a mobile device..? I have it working great on my computer...but not on my mobile device...
Yeah, I did deploy apps with a SW that worked fine on my mobile phone. Maybe you're using an OS version that doesn't support service workers?
Thanks for your feedback. I know it does, because I tried the NgColombia 2018 page which is a PWA / Service Worker app. That app works just fine in Airplane Mode. But, I think I have to get a publicly verified CA certificate connected to my site (currently using an offline Root CA internally) . I don't think the service worker register the service worker properly if there is an issue with the certificate.
Сool lesson.You can take the lesson angular 6 + chart.js + json
"BonbonAusWurst" - most German WiFi name ever lol
:D
When i put offline the page says that doesn't work. I followed all your steps. Can you help me?
I have also routes with hashtag. Please @Academind.
Como a língua inglesa me faz falta... Preciso melhorar mais!
Hey Max, I wish to be a full stack developer. I finished your React course on Udemy and can't decide which back end service/framework I should choose. Which is the best one according to you?
+Ilya Zhidkov That's what I thought. Which do you think is better between ExpressJS and MeteorJS?
If you know JS maybe it's a good idea to learn Node.JS (Never tried myself). If you know/like Python, try Django too, it's pretty cool.
@Juan2003gtr try flask, its very simple to start with, and you can add as many features as you want as you go...
Hi my localhost:8082/#/ showing "this page isn’t working localhost sent an invalid response. ERR_INVALID_REDIRECT"
Getting similar error and the API is not cached. Can anybody please share your suggestions?
Official doc link is missing
Thank you Navneet, I just added the link.
Hi, Max. Do you know what happened to TheNewBoston ?
No, I was also wondering where he went. Got no idea.
He forgot the password..
Can you put this app on github so we can clone it to be able to work with it
You can find the starting and the finished code below the video: www.academind.com/learn/angular/snippets/angular-pwa-service-worker-tutorial/
Got it. You have been a huge inspiration to me Max. However, do you have tutorials on how to consume api end point(s) using Angular4 or 5 or 6.
14:30
React bitte!