Making your IONIC app a PWA

The two main requirements of a PWA are a Service Worker and a Web Manifest. While it’s possible to add both of these to an app manually, the Angular team has an @angular/pwa the package that can be used to automate this.

The @angular/pwa the package will automatically add a service worker and an app manifest to the app. To add this package to the app, run:

ng add @angular/pwa


 

Once this package has been added run ionic build --prod and the www the directory will be ready to deploy as a PWA.

Service Worker configuration

After @angular/pwa has been added, a new ngsw-config.json the file will be created at the root of the project. This file is responsible for configuring how Angular’s service worker mechanism will handle caching assets. By default, the following will be provided:

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

There are two sections here, one for app-specific resources (JS, CSS, HTML) and assets the app will load on demand. Depending on your app, these options can be customized. For a more detailed guide, read the official guide from the Angular Team.

 

Deploying on Firebase

Firebase Hosting provides many benefits for Progressive Web Apps, including fast response times thanks to CDNs, HTTPS enabled by default, and support for HTTP2 push.

First, if not already available, create the project in Firebase.

Next, in a Terminal, install the Firebase CLI:

 

$ npm install -g firebase-tools

 

With the Firebase CLI installed, run firebase init within your Ionic project. The CLI prompts:

“Which Firebase CLI features do you want to set up for this folder?” Choose “Hosting: Configure and deploy Firebase Hosting sites.”

“Select a default Firebase project for this directory:” Choose the project you created on the Firebase website.

“What do you want to use as your public directory?” Enter “www”.

Note: Answering these next two questions will ensure that routing, hard reload, and deep linking work in the app:

Configure as a single-page app (rewrite all URLs to /index.html)?” Enter “Yes”.

“File www/index.html already exists. Overwrite?” Enter “No”.

A firebase.json the config file is generated, configuring the app for deployment.

The last thing needed is to make sure caching headers are being set correctly. To do this, add a headers snippet to the firebase.json file. The complete firebase.json looks like this:

{
  "hosting": {
    "public": "www",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {
        "source": "/build/app/**",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=31536000"
          }
        ]
      },
      {
        "source": "ngsw-worker.js",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache"
          }
        ]
      }
    ]
  }
}

For more information about the firebase.json properties, see the Firebase documentation.

Next, build an optimized version of the app by running:

$ ionic build --prod

Last, deploy the app by running:

$ firebase deploy

After this completes, the app will be live.

 

I have followed the following link to implement PWA in my IONIC app:

https://ionicframework.com/docs/angular/pwa