Angular

How to tailor PWA application using ionic

Everyone has solid build smartphones nowadays but are we building a web application that is trailered for them? Using Ionic we can build a PWA powered application effortlessly

Vasanth Jagadeesan

Nov 29, 2019 — 2 min read

Getting started with PWA using ionic - mobilelabs.in

What is Progressive Web Application?

A Progressive Web App (PWA) is a web app that uses modern web capabilities to deliver an app-like experience to users. These apps meet certain requirements (see below), are deployed to servers, accessible through URLs, and indexed by search engines. source(ionic)

ng add @angular/pwa

This package tailor PWA in our application and generates manifest file, Service Worker. By default ionic build will not include the PWA files so you need to include prod flag while building the application.

ionic build --prod

Now the build is ready to deploy for the PWA action. We can find the build files in www directory.

Service Worker Configuration

{
  "$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)"
        ]
      }
    }
  ]
}

Deploying

Firebase hosting ships with global CDN with https enabled by default.

firebase init

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".

Configure as a single-page app (rewrite all urls to /index.html)?

Enter "Yes".

File www/index.html already exists. Overwrite?

Enter "No".

Now we will have firebase,json config file generated which can be used to for configure deployment.

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

Let's build our PWA application