@ngVikingsConf

Follow Twitter

March 1-2, Helsinki, Finland

AJAX

Static

Dynamic

RWD

PWA

... attempts to combine features offered by most modern browsers with the benefits of mobile experience

... web apps that use the latest web technologies.

 App Shell architecture

 Service Worker API

Push API and Notifications API

sw-precache

@angular/service-worker

v1.0.0-beta.16 - 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

Angular PWA

{
  "routing": {
    "index": "/index.html",
    "routes": {
      "/": {
        "match": "exact"
      },
      "/some/routes-group-prefix": {
        "match": "prefix"
      }
    }
  }
}

ngsw-manifest.json

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

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

ngsw-manifest.json

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

Backend

Notification

Push Service

NGSW

App

Backend

Push Service

App

Subscription

Sending a notification

{
  "push": {
    "showNotifications": true
  }
}

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

constructor(public sw: NgServiceWorker) {}

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

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

push.component.ts

push.component.ts

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

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

ngsw-manifest.json

Documentation!