AshKey's Logo
ServicesAbout Us

AshKeys

Confessions and Confusions of a Freelance Fullstacker.

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:wght@200;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:wght@300;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.