Confessions and Confusions of Ashok M A. Personal and Professional Blog.

Ashok Mannolu Arunachalam, How toAngularPWA

How to make an angular app into a Progressive Web App

With the angular cli, it is really handy to make one's angular app into a Progressive Web App.

Add PWA capabilities

Just add @angular/pwa module to your angular app using the cli.

$ ng add @angular/pwa

This adds the PWA module and generates the default PWA featuers with the service-worker configured for basic assets cache. It also generates a manifest.webmanifest and few icons.

Update ngsw-config.json

If you have more assets to be cached by the service worker to be more of a PWA, update the ngsw-config.json like below:

"$schema": "./node_modules/@angular/service-worker/config/schema.json",
"index": "/index.html",
"assetGroups": [
"name": "app",
"installMode": "prefetch",
"resources": {
"urls": [
"[email protected];400;800&display=swap",
"[email protected]/dist/css/bootstrap.min.css",
"[email protected];400;500&display=swap",
"files": [
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [

Here I have also added the URLs for the static CDN resources like bootstrap.min.css

Use PWA assets generators such as ngx-pwa-icons or pwa-asset-generator to generate icons for your PWA precisly for each devices.