Angular Service Worker Tutorial

[@ondrejzaruba3402]

Max is my Angular father :3

[@DesignCourse]

Great tutorial!

[@academind]

So happy to read that you like it, thank you!

[@JustLookA7]

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!

[@DebmallyaBhattacharya]

Just what I was looking for. You are among the best tutors, Max. Thanks :)

[@academind]

Thanks so much Debmallya, I really appreciate your great feedback!

[@wmjotos]

Max is simply the best teacher ever

[@academind]

YOU are the best Joachim, thank you very much for your fantastic feedback!

[@lucaslinares7806]

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

[@BrutalStrike2]

still actual and still one of the best explanations

[@abhijitboda]

You are awesome! I was looking for this, and it improved my google performance rate.

[@iamchiranjeevin]

Thank you for the crisp and clear explanation !

[@MinhTuanTerryTa]

Wow! Angular's support for PWA is awesome!

[@academind]

It's indeed very simple :)

[@MinhTuanTerryTa]

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?

[@vaibhavphutane286]

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 .

[@bismiksm]

Thank you Max! You contributed to save my life! Again!

[@atlrafa]

Never disappoints. Great explanation.

[@kiranpawar2463]

Please provide more videos on service workers

[@MA-kt8ly]

Beautiful presentation Mr. Max the guru.

[@academind]

Thanks a lot Mick!

[@MrMaksim2099]

Thanks for such useful information!

[@academind]

Thank YOU for your comment, happy to read that you like it!

[@niteeshyarra5348]

Keep up the good work man!!

[@nikitachechet6510]

extremely cool guide! thanks a lot!

[@matthewogunmola7615]

Good Job Max. Thanks!!

[@MarcKronberg]

Max is the best!

[@academind]

YOU are the best Marc, thank you for your support!

[@nanasarathi]

Very useful Max... Thanks...

[@sfk615]

Excellent explanation of service workers

[@academind]

Thanks a lot!

[@gsimadri3114]

Pretty awesome, I appreciate the content of your tutorial, thanks a lot.

[@ivanaleksandrov7157]

Thanks Max, as always a great video and well explained. Cheers!

[@academind]

Happy to read that you like it Ivan, thank you so much!

[@akshaypal1209]

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?

[@jared4670]

Very helpful. Thanks Max!

[@academind]

Happy to read that Jared, thank you!

[@sourabhsatyavarti6581]

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.

[@CarlHamilton1914]

This was very helpful! Thanks!

[@lalitbansal4817]

Hey @maxi Can we implement "background sync" feature in our angular app?

[@sonyvizio]

awesome explanation.

[@sireeshakuna5686]

You are always great

[@JohnathanHendrix]

Can you use cacheConfig on the assetGroups?

[@sailyjadhav1111]

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

[@ВладиславХрамов]

Thank you for such a meaningful video!

[@ambiank4980]

I can't find the code repo link in the description. Where can I find it?

[@hope2191]

Thank you so much for your tutorials :)

[@academind]

Thank YOU for your support!

[@abhilashdeshmukh7566]

Thanks a lot Very very helpful 😊

[@barjosa31blogspot83]

Thank You, Max!

[@academind]

Thank YOU for your awesome support :)

[@aaronaaronaaron5922]

You are Great, Max!!! :D Thank you!!!

[@amitrathore9457]

Great explanation thank you.

[@ThemLoLShortClips]

This is gold!

[@academind]

Thanks so much, just fantastic to read that!

[@paulbenedictjabines2261]

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?)

[@screendriveio]

Superb , Great help for amy app

[@academind]

So cool to read that Faisal, thanks a lot for sharing this!

[@HassanRaza-ym3uf]

Thank you sir!

[@_akunin3674]

thx bro, was halpfull

[@MrRorypam]

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?

[@ruslanpascoal9247]

Thank's again Max

[@allahhoo995]

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!

[@vicentedeluca7732]

was helpful!

[@saisreenivas1003]

thank you max lot of information

[@academind]

Thanks so much for your great feedback :)

[@DanielTheCunningham]

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?

[@federicooffidani4082]

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!

[@kshitijgupta592]

In app.module.ts, location of ngsw-work.js should be with / or without? In your video it is with a / and in my auto-generated code, it is without /. Also I have a folder named static instead of dist

[@anindya330]

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

[@tjabrahamsen8907]

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

[@academind]

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 :/

[@tjabrahamsen8907]

Thank you for your quick reply. Will see what I can come up with :-)

[@tjabrahamsen8907]

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

[@lifeofaaravsutar]

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.

[@tjabrahamsen8907]

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

[@academind]

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?

[@tjabrahamsen8907]

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.

[@pratikagarwal7210]

Tons of thanks

[@phillip4002]

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?

[@academind]

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

[@phillip4002]

Thanks! Maybe a topic for another video! 😁

[@surajgupta8393]

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.

[@diegoxavier8479]

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?

[@Akshay-Raut]

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.

[@zlatanonkovic2424]

"BonbonAusWurst" - most German WiFi name ever lol

[@academind]

:D

[@theanswerga]

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.

[@tijldeclerck7772]

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.

[@henryromero7492]

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

[@user-ot1dv6ri4f]

You're my favourite I have some of your Udemy courses

[@academind]

It really makes me happy to read that Ben, thanks a lot for your support here and on Udemy!

[@bluespace7969]

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?

[@MuhammadHamza-xq9bi]

how to write code in service workers?

[@pro100skm]

where can i read about navigationUrls?

[@shubhambattoo9786]

Super like, Great Tutorial

[@academind]

Thank you Shubham!

[@sunilsoni8171]

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

[@jalipenorunner]

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.

[@MuhammadbinYusrat]

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

[@rajbusybee]

how can we cache CDN files using serviceworker

[@sathwiqreddy1129]

How to get 2 different data models from different APIs

[@임창수-c7c]

Thank you. Vue PWA plz too!

[@farenrai576]

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

[@kiranpawar2463]

Great vedio

[@freelearn5180]

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.

[@arnoutpullen3466]

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.

[@freelearn5180]

thank you very much.

[@Marc1920x1080p]

Doesnt PWA require HTTPS ? So iam wondering why an http server could work here.

[@jayanths1221]

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?

[@jayanths1221]

+Ilya Zhidkov That's what I thought. Which do you think is better between ExpressJS and MeteorJS?

[@Skaxarrat]

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.

[@AdamSaudagar]

@Juan2003gtr try flask, its very simple to start with, and you can add as many features as you want as you go...

[@livri7579]

Does this work with angular 5 ?

[@nishedhkumar2352]

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?

[@divyanshutyagiofficial]

Does it work on angular 4 ??

[@shanmayilvasan2878]

If he is the tutor, i am learning this course. Big Fan of Max

[@deepaks.m.6709]

Hi, Max. Do you know what happened to TheNewBoston ?

[@academind]

No, I was also wondering where he went. Got no idea.

[@divyanshutyagiofficial]

He forgot the password..

[@m.venkateshprasad5834]

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

[@Alessandro_Russo]

When i put offline the page says that doesn't work. I followed all your steps. Can you help me?

[@Alessandro_Russo]

I have also routes with hashtag. Please @Academind.

[@navneetkumarsharma9092]

Official doc link is missing

[@academind]

Thank you Navneet, I just added the link.

[@kalidoss7234]

Thanks

[@matthewogunmola7615]

Can you put this app on github so we can clone it to be able to work with it

[@academind]

You can find the starting and the finished code below the video: www.academind.com/learn/angular/snippets/angular-pwa-service-worker-tutorial/

[@matthewogunmola7615]

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.

[@MayankGupta-el9rj]

Nice explanation. Thank you.

[@academind]

Great to read that Mayank, thank you!

[@rakeshnayak2072]

Hi my localhost:8082/#/ showing "this page isn’t working localhost sent an invalid response. ERR_INVALID_REDIRECT"

[@manjunathrm7633]

Getting similar error and the API is not cached. Can anybody please share your suggestions?

[@STRIKEtetra]

Como a língua inglesa me faz falta... Preciso melhorar mais!

[@andriizarazka8671]

Сool lesson.You can take the lesson angular 6 + chart.js + json

[@sergiodesousafilho]

cool! tks!!

[@ArielFAF]

14:30

[@alexnezhynsky9707]

React bitte!

[@manjunathrm7633]

Getting 504 error when the dataGroup is updated in ngsw config file. API is not cached. Can anybody please share your suggestions?