AJAX

Static

Dynamic

RWD

PWA

... Progressive Web App can be seen as an evolving hybrid of regular web pages (or websites) and a mobile application

... a new software development methodology

 App Shell architecture

 Service Worker API

Push API and Notifications API

@angular/service-worker

v1.0.0-beta.8 - Experimental service worker by the Angular Mobile team

@angular/app-shell

v0.1.0 - App Shell runtime library for Angular Progressive Web Apps

# First, install the Angular Service Worker
$ npm install --save @angular/service-worker

# Enable the SW registration + app shell in Angular CLI
$ ng set apps.0.serviceWorker=true

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

.angular-cli.json

# NGSW works only in --prod mode
$ ng build --prod

<script src="sw-register.{HASH}.bundle.js"></script>

• sw-register.{HASH}.bundle.js

• worker-basic.min.js

• ngsw-manifest.json

index.html

{
  "static": {
    "urls": {
      "/index.html": "ae543...",
      "/main.bundle.js": "9ff18...",
      "/styles.bundle.css": "d6f44...",
      "/assets/images/logo.png": "0e33a...",
      ...
    }
  }
}

ngsw-manifest.json

{
  "routing": {
    "index": "/index.html",
    "routes": {
      "/": {
        "prefix": false
      },
      "/some/routes-group-prefix": {
        "prefix": true
      }
    }
  }
}

ngsw-manifest.json

{
    "static" : {
        ...autogenerated
    }
}

{
    "routing" : {...}
    ...
}

ngsw-manifest.json

Angular PWA

{
  "external": {
    "urls": [
      {
        "url": "https://fonts.gstatic.com/Roboto.ttf"
      }
    ]
  }
}

ngsw-manifest.json

{
  "dynamic": {
    "groups": [
      {
        "name": "api",
        "urls": {...},
        "cache": {...}
       }
    ]
  }
}

ngsw-manifest.json

cache: {
  "optimizeFor": "freshness",   // or 'performance'
  "networkTimeoutMs": 200,
  "maxAgeMs": 1000,
  "maxEntries": 2,
  "strategy": "fifo"            // or 'lru', 'lfu'
}

urls: {
    "/api/breakingnews": {
        "match": "prefix"
    }
},

ngsw-manifest.json

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

constructor(public sw: NgServiceWorker) {}

app.component.ts

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

imports: [
    ...
    ServiceWorkerModule
]

app.module.ts

sw.updates.subscribe(event => {
  if (event.type === 'pending') {
    // Ask user if they want to update?
    if (agreeToUpdate) {
        sw.activateUpdate(event.version);
    }
  } else {
    // event.type === 'activation'
    // NGSW is now serving a new version
    location.reload();
  }
});

app.component.ts

Backend

Notification

Push Service

NGSW

App

Backend

Push Service

App

Subscription

Sending a notification

{
  "push": {
    "showNotifications": true,
    "backgroundOnly": false
  }
}

ngsw-manifest.json

constructor(public sw: NgServiceWorker) {}

sw.registerForPush().subscribe(subscriptionObject => {
    // Send subscription data to the server
});

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

push.component.ts

sw.push.subscribe(notificationPayload => {
    // Process notification data
});

import {bootstrapServiceWorker} from '@angular/service-worker/worker';
import {StaticContentCache} from '@angular/service-worker/plugins/static';
...

bootstrapServiceWorker({
  manifestUrl: '/ngsw-manifest.json',
  plugins: [
    StaticContentCache(),
    ...
  ]
});

worker/builds/basic.ts

import {bootstrapServiceWorker} from '@angular/service-worker/worker';
import {StaticContentCache} from '@angular/service-worker/plugins/static';
...
import {MyCustomPlugin} from './plugins/my-custom-plugin';

bootstrapServiceWorker({
  manifestUrl: '/ngsw-manifest.json',
  plugins: [
    StaticContentCache(),
    ...
    MyCustomPlugin()
  ]
});

worker-custom.js

{
  "static": {...},
  "routing": {...},
  "external": {...},
  "dynamic": {...},
  "push": {...}
}

ngsw-manifest.json