Angular Service Worker Tutorial
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:
Official docs:
Want to learn something totally different? Check out all other courses:
———-
• You can follow Max on Twitter (@maxedapps).
• And you should of course also follow @academind_real.
• You can also find us on Facebook.( )
• Or visit our Website ( ) 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!
Hey @maxi
Can we implement “background sync” feature in our angular app?
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 🙂
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
I learned angular from his lectures at udemy and I am now as a full stack dev. He explains great at any platform
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 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
.
Never disappoints. Great explanation.
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!
Thanks Max, as always a great video and well explained. Cheers!
Happy to read that you like it Ivan, thank you so much!
Thank you for the crisp and clear explanation !
Pretty awesome, I appreciate the content of your tutorial, thanks a lot.
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?
Thank You, Max!
Thank YOU for your awesome support 🙂
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. ?
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?
This was very helpful! Thanks!
Thanks a lot
Very very helpful ?
Thank you for such a meaningful video!
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.
Max, what are the cons of using the offline mode? Will the initial loading time be slower? These are amazing information. Thank you.
You don’t ‘use’ offline mode so I’ll presume you meant the local cache? There are no cons if your app doesn’t rely heavily on frequently changing information.
The ‘initial loading time’ in general will be faster (which is why you set it performance vs freshness).
If by ‘initial loading time’ you meant the very very first time ever your app loads it’s about the same.
I would assume not because it simply gets the data from the cache so they don’t have to make slow server requests.