Angular Library - Angular PWA

Angular service worker makes Angular a Progressive Web App (PWA).

 

To maximize the user experience Angular follow a guideline below:

• An application is stored in the same cache so that all the files in the application can be updated all together.
• Updated cache does not take an effect and runs the current version until the page is reloaded
• The updating happens behind the scene and the updated version only runs when it is fully ready.
• Necessary resources are downloaded when they needed

To support these features Angular creates a manifest file called ‘ngse.json’ that is created CLI configuration file in the ‘ngsw-config.json’ file to store all the cache and hash data of contents, to inform the angular service worker of the changes. manifest.

 

Note that angular service worker cannot be used with ‘HTTP’ for security reason (this does not apply for the local environment).

Cashed data

• index.html
• favicon.ico
• JS and CSS bundles (build artifacts)
• Everything under the assets folder
• Images and fonts that are directly placed under the outputPath (./dist/<project-name>/) or resourcesOutputPath

If the outputPath or resourcesOutputPath is changed after configuration file is created. you have to change the path in the ngsw-config-json file to reflect the changes.

How to use Angular PWA

If you run the command below setup is done automatically (package added, CLI build support, added to module, icon file added, and ngsw-config.json file added. And in the .index.html file manifest.webmanifest and theme-color are added.

ng add @angular/pwa --project <project-name>

Reflect changes by running

 

ng build

---

References

Angular