How to convert your Angular app into a PWA — the painless guide for 5 year olds.
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.
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…
- Automatically imports and registers the service worker in the app module.
- Updates index.html to include the manifest.json file which has details about the progress web application.
- 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.
- 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.
- Any files located in the assets folder.
- Images and fonts directly under the configured
We can set an
installMode for the different assets.
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.
updateMode is used to determine what to do with the cache when an updated version of the app is discovered.
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!