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.

----------

----------

• And you should of course also follow @academind_real.

See you in the videos!

----------

[JustLookA]

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

[lucaslinares]

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

[BrutalStrike]

still actual and still one of the best explanations

[iamchiranjeevin]

Thank you for the crisp and clear explanation !

[MinhTuanTerryTa]

Wow! Angular's support for PWA is awesome!

[abhijitboda]

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

[vaibhavphutane]

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!

[sourabhsatyavarti]

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.

[akshaypal]

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?

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

[sailyjadhav]

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

[anindya]

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

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

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

[federicooffidani]

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!

[JohnathanHendrix]

Can you use cacheConfig on the assetGroups?

[allahhoo]

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!

[lalitbansal]

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