Progressive Web Apps

Mai 2018 State

Progressive Web Apps (PWAs)

Check it out!

Let's start

1. Install prerequisites as described here
2. Start a sample app as described here
3. npm start does the following:

   

Web App Manifest

to make the app

installable

and load in full screen mode

Web App Manifest

Web App Manifest Generators

Chrome Dev Tools

So we've reached the state

on the 1-manifest branch...

App Shell

to make the app fast :)

ng generate app-shell

• adds a new component called AppShellComponent
• adds the /app-shell route linked to the AppShellComponent
• adds both the AppShellComponent and the /app-shell route only to the Universal bundle (AppServerModule)
• adds the appShell section to angular-cli.json

ng build --prod

• pre-renders the /app-shell route
• takes the HTML output and
• adds it to dist/index.html

AppShellComponent may (and should) be changed

app-shell.component.html (<div> is added and its height is set because of this bug)

<div class="container">
  <mat-spinner color="accent" [diameter]="140"></mat-spinner>
</div>
                

app-shell.component.scss

div.container {
  height: 160px;
  mat-spinner {
    margin: 0 auto;
  }
}
                

app.server.module.ts

@NgModule({
  imports: [... MatProgressSpinnerModule]
})
export class AppServerModule {}
                

We'll add a convenience script for starting the server in production mode

npm install express-history-api-fallback --save-dev

server/server.ts

const fallback = require('express-history-api-fallback');

const root = `${__dirname}/../dist`;
app.use(express.static(root));
app.use(fallback('index.html', {root}));
                

package.json

  "scripts": {
    "server:prod": "./node_modules/.bin/npm-run-all --parallel server build"
  }
                

App Shell in action

So we've reached the state

on the 2-app-shell branch...

Service Worker

to make the app work offline

Add Service Worker to the app (1)

npm install @angular/service-worker

app.module.ts

import {ServiceWorkerModule} from '@angular/service-worker';

@NgModule(
  imports: [
    ServiceWorkerModule.register('/ngsw-worker.js',
        {enabled: environment.production})]
})
export class AppModule {}
                

angular-cli.json

"apps": [
    {
      "serviceWorker": true
    }
]
                

Add Service Worker to the app (2)

src/ngsw-config.json

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/assets/manifest/favicon.ico",
          "/index.html"
        ],
        "versionedFiles": [
          "/*.bundle.css",
          "/*.bundle.js",
          "/*.chunk.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**"
        ]
      }
    },
    {
      "name": "fonts",
      "resources": {
        "urls": [
          "https://fonts.googleapis.com/**",
          "https://fonts.gstatic.com/**",
          "http://covers.openlibrary.org/**"
        ]
      }
    }
  ],
  "dataGroups": [
    {
      "name": "api-freshness",
      "urls": [
        "/api/book"
      ],
      "cacheConfig": {
        "strategy": "freshness",
        "maxSize": 100,
        "maxAge": "3d",
        "timeout": "10s"
      }
    }
  ]
}
                

For details on configuration please refer to Angular Guide

ng build --prod

• /dist/ngsw-worker.js which is in fact the Service Worker
• and its runtime configuration /dist/ngsw.json used to check which files should be cached, which expired, etc.

Service Worker in action

So we've reached the state

on the 3-service-worker branch...

Push Notifications

to engage app users

(excluding  ones)

Step 1: Client Side

Step 2: Send a Push Message

Step 3: Push Event on the User's Device

We need to uniquely identify our server to Push Services.

Therefore we are going to generate a VAPID (Voluntary Application Server Identification) key pair for that.

We make use of the web-push library:

npm install web-push

Generating VAPID keys for our server:

 node_modules\.bin\web-push generate-vapid-keys --json

Subscribing to Push Notifications

sw-push-sub-btn.component.ts (full example)

import {SwPush} from '@angular/service-worker';

@Component(...)
export class SwPushSubBtnComponent {
  private readonly VAPID_PUBLIC_KEY = 'BK8...';

  constructor(private swPush: SwPush) {}

  subscribe() {
    this.swPush.requestSubscription({
      serverPublicKey: this.VAPID_PUBLIC_KEY
    })
      .then(subscription => {
        // send the subscription to our server
      })
      .catch(err => {
        console.error('swPush.requestSubscription() failed', err);
      });
  }
}
                

Send a Push Message

server.ts (full example)

import * as webPush from 'web-push';

const vapidKeys = {
  publicKey: 'BK8...',
  privateKey: '77ne...'
};

webPush.setVapidDetails(
  'https://github.com/devonfw-ng-adv-training',
  vapidKeys.publicKey,
  vapidKeys.privateKey
);

app.post('/api/message', (req, res) => {
    Promise.all(subscriptions.map(sub => webPush.sendNotification(
      sub, JSON.stringify({
        notification: {
          title: 'Hello PWA User!',
          body: 'This is a Push Notification!',
          icon: 'assets/manifest/android-chrome-192x192.png',
          vibrate: [100, 50, 100],
          data: {
            dateOfArrival: Date.now(),
            primaryKey: 1
          }
        }
      }))))
      .then(() => res.sendStatus(200))
      .catch(err => {
        console.error('Error sending notification, reason: ', err);
        res.sendStatus(500);
      });
  }
);
                

Push Notifications in action

So we've reached the state

on the 4-push-notifications branch...