Login

Lost your password?
Don't have an account? Sign Up

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!

https://www.educational.guru

28 comments

  1. TJ Abrahamsen

    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…

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

    2. TJ Abrahamsen

      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 🙂

  2. Saily Jadhav

    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

  3. AM

    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!

  4. Daniel Cunningham

    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?

  5. Lucas Linares

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

  6. Nanda Kumar

    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?

    1. nerdiloo

      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.

Leave a Comment

Your email address will not be published. Required fields are marked *

*
*