(226) 377-3114
How to set up your Angular (ionic) app as a PWA
ng add @angular/pwa
The previous command generated a bunch of icons in assets/icons that need to be modified (unless you want the generic angular icon). You will also give your app a name and theme colour here.
{
"name": "App Name",
"short_name": "App Short Name",
"theme_color": "#ffffff", // Color of the status bar
"background_color": "#fafafa",
"display": "standalone",
"scope": "./",
"start_url": "./",
"icons": [ //list of all the icons that were created in the assets/icons folder
{
"src": "assets/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png",
"purpose": "maskable any"
},
.
.
.
{
"src": "assets/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable any"
}
]
}
We need to add a link to the icon we want to use for the home screen on iOS. Also modify the title.
<head>
<meta charset="utf-8"/>
<title>APP NAME HERE</title>
<base href="/"/>
<meta name="color-scheme" content="light dark"/>
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="msapplication-tap-highlight" content="no"/>
<link rel="icon" type="image/png" href="assets/icon/favicon.png"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<link rel="manifest" href="manifest.webmanifest">
<meta name="theme-color" content="#1976d2">
<!-- ADD NEXT LINE -->
<link rel="apple-touch-icon" href="assets/icons/icon-512x512.png">
<!-- ADD PREVIOUS LINE -->
</head>
We need to force the service worker to load a new version when there is a new one on the server. Otherwise it won't and your users will continue to see the old version.
You should modify your app.component.ts as follows:
1 - import the SwUpdate package
import { SwUpdate } from '@angular/service-worker';
2 - add it into your constructor, then check for updates if the browser supports it
constructor(private swUpdate: SwUpdate) {
if(this.swUpdate.isEnabled){
this.swUpdate.available.subscribe(event => {
location.reload();
});
}
}
