AshKeys

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

Ashok Mannolu Arunachalam, How toAngularPWA
Back

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.

shell
$ 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:

json
{
"$schema": "./node_modules/@angular/service-worker/config/schema.json",
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"urls": [
"https://fonts.googleapis.com/css2?family=Nunito:[email protected];400;800&display=swap",
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css",
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css",
"https://fonts.googleapis.com/css2?family=Roboto:[email protected];400;500&display=swap",
"https://fonts.googleapis.com/icon?family=Material+Icons"
],
"files": [
"/favicon.ico",
"/index.html",
"/manifest.webmanifest",
"/*.css",
"/*.js"
]
}
},
{
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**",
"/*.(json|svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
]
}
}
]
}
}

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.