(226) 377-3114

Ionic + Angular + PWA

How to set up your Angular (ionic) app as a PWA

Step #1: Install the Angular PWA package

ng add @angular/pwa

Step #2: Modify manifest.webmanifest

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"
    }
  ]
}


Step #3: Modify index.html

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>


Step #4: Subscribe to Updates

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();
      });
    }
}

Let's work together.

Get in Touch
Copyright © ConvertLion.
Lets Connect!