Nathan K
Nathan K
Sep 6 · 3 min read

The pimple-simple guide on how to turn your Angular application into a progressive web application and deliver amazing user experiences.

Now, I don’t believe in stealing other people’s stuff. And running off with a comrades THUNDER isn’t right.

But I like an easy, reference guide that I can refer to instead of digging through the Angular docs.

With no further hubbub or jangling, here it is.

1. Add the service worker.

ng add @angular/pwa --project *project-name*

You can find the project name in your angular.json file.

Installing Angular service worker.

This used to take experts hours or days to whip-up. Now a 3-year old shaver can install this before you stop him. This command does a HUGE amount of the heavy lifting.

A few things it does that you should be aware…

  1. Automatically imports and registers the service worker in the app module.
  2. Updates index.html to include the manifest.json file which has details about the progress web application.
  3. Creates the icon files to support the PWA. These are stuck into the src/assets/icons folder and should be updated with the apps icon for branding purposes.
  4. Creates src/ngsw-config.json. This file is used to configure the service worker.

2. Configure the service worker.

The default service worker will automatically cache the following files.

  • index.html
  • favicon.ico
  • All of the build artifacts (JavaScript and CSS bundles).
  • Any files located in the assets folder.
  • Images and fonts directly under the configured outputPath (by default ./dist/<project-name>/) or resourcesOutputPath.
angular service worker configuration
angular service worker configuration
Configuring the service worker

Install Mode

We can set an installMode for the different assets.

The lazy mode is an on-demand caching method meaning that resources that are never requested won’t be requested. The prefetch mode is used to make sure all resources are requested and cached as soon as possible.

Update Mode

The updateMode is used to determine what to do with the cache when an updated version of the app is discovered.

The prefetch mode is used to update the cached immediately with new resources. The lazy mode will only store the new resources in the cache when they’ve specifically been requested.

3. You’re done!

I hope you found this short guide helpful. Please give it more energy by clicking that 👏 button.

And don’t forget to follow me on Medium. Thank-you!

JavaScript in Plain English

Learn the web's most important programming language.

Nathan K

Written by

Nathan K

Where I drawl about Angular and code in general.

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade