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!
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?
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. 😑
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 .
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?
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.
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?
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?
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
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!
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!
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.
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.
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?)
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!!
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...
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.
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.
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?
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?
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
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 :/
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 :-)
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.
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?
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
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.
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
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
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.
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
Max is my Angular father :3
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!
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?
Great tutorial!
So happy to read that you like it, thank you!
still actual and still one of the best explanations
Max is simply the best teacher ever
YOU are the best Joachim, thank you very much for your fantastic feedback!
You are awesome! I was looking for this, and it improved my google performance rate.
Thank you for the crisp and clear explanation !
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. 😑
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
.
Thank you Max! You contributed to save my life! Again!
Never disappoints. Great explanation.
extremely cool guide! thanks a lot!
Beautiful presentation Mr. Max the guru.
Thanks a lot Mick!
Keep up the good work man!!
Pretty awesome, I appreciate the content of your tutorial, thanks a lot.
Thanks for such useful information!
Thank YOU for your comment, happy to read that you like it!
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?
Max is the best!
YOU are the best Marc, 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.
Excellent explanation of service workers
Thanks a lot!
Good Job Max. Thanks!!
Very useful Max... Thanks...
Thanks Max, as always a great video and well explained. Cheers!
Happy to read that you like it Ivan, thank you so much!
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?
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?
Very helpful. Thanks Max!
Happy to read that Jared, thank you!
awesome explanation.
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!
Thanks a lot
Very very helpful 😊
Great explanation thank you.
You are always great
thx bro, was halpfull
Thank's again Max
This is gold!
Thanks so much, just fantastic to read that!
Thank you sir!
This was very helpful! Thanks!
Thank You, Max!
Thank YOU for your awesome support :)
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!
Tons of thanks
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!
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
You are Great, Max!!! :D Thank you!!!
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.
Hey @maxi
Can we implement "background sync" feature in our angular app?
Thank you so much for your tutorials :)
Thank YOU for your support!
Superb , Great help for amy app
So cool to read that Faisal, thanks a lot for sharing this!
was helpful!
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.
If he is the tutor, i am learning this course. Big Fan of Max
I can't find the code repo link in the description. Where can I find it?
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?)
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!!
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!
Doesnt PWA require HTTPS ? So iam wondering why an http server could work here.
Can you use cacheConfig on the assetGroups?
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.
"BonbonAusWurst" - most German WiFi name ever lol
:D
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.
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...
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?
Getting 504 error when the dataGroup is updated in ngsw config file. API is not cached. Can anybody please share your suggestions?
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! 😁
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 :-)
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.
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?
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
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.
Great vedio
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
Super like, Great Tutorial
Thank you Shubham!
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
Thank you. Vue PWA plz too!
where can i read about navigationUrls?
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.
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.
Сool lesson.You can take the lesson angular 6 + chart.js + json
How to get 2 different data models from different APIs
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. Do you know what happened to TheNewBoston ?
No, I was also wondering where he went. Got no idea.
He forgot the password..
Nice explanation. Thank you.
Great to read that Mayank, thank you!
how can we cache CDN files using serviceworker
Thanks
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?
Does this work with angular 5 ?
how to write code in service workers?
cool! tks!!
Does it work on angular 4 ??
Official doc link is missing
Thank you Navneet, I just added the link.
Como a língua inglesa me faz falta... Preciso melhorar mais!
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!
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?