progressive web apps with angular 2

21
30.06.2016 1 Progressive Web Apps with Angular 2 Manfred Steyer About me … Manfred Steyer SOFTWAREarchitekt.at Trainer & Consultant Focus: Angular Page 2

Upload: manfred-steyer

Post on 16-Apr-2017

6.888 views

Category:

Internet


8 download

TRANSCRIPT

30.06.2016

1

Progressive Web Appswith Angular 2

Manfred Steyer

About me …

• Manfred Steyer

• SOFTWAREarchitekt.at

• Trainer & Consultant

• Focus: Angular

Page 2

30.06.2016

2

Contents

Overview

Offline with Service Workers

Immediate Value with AppShell

Background Sync

Push

Angular Mobile Toolkit

Overview

30.06.2016

3

Web Apps

Noinstallation

Cross-Plattform

Easy Deployment

Easy toupdate

SearchableLinks/

Bookmarks

Native Apps

Easy tolaunch

ImmetiateValue

Offline

Slow Connections

Push Notifications

Device-Access

30.06.2016

4

Progressive Web Apps provide

the best of both worlds

Progressive Enhancements: Offline, Caching, Home-Screen etc.

30.06.2016

5

App must also be useful withoutBrowser-support for those

enhancements!

vs.

30.06.2016

6

[http://alistapart.com/article/understandingprogressiveenhancement]

Content

Layout

Scripting withProgressive Ext.

30.06.2016

7

How to implementprogressive enhancements?

Case Study

30.06.2016

8

Features

Offline

Background Sync

PushHome-Screen

Immediate Value

DEMO

30.06.2016

9

Offline with Service Workers

What are Service Worker?

• Background Tasks

• Are installed by an Web App

• Can run without Web App

• Can decide to go idle or tore-activate them self

• HTTPS only

• No XHR, but fetch

30.06.2016

10

Service Worker and Offline

• Can intercept requests

• Can decide how to respond to requests

• Caching Pattern• Cache only

• Network only

• Try cache first, then network

• Try network first, then cache

• etc.

Service Worker Toolbox

//sw-with-toolbox.jsimportScripts('/node_modules/sw-toolbox/sw-toolbox.js');

toolbox.precache(CACHE_FILES);

toolbox.router.get('/(.*)', toolbox.networkOnly, {origin: 'http://www.angular.at'});

toolbox.router.default = toolbox.cacheFirst;

<script src="node_modules/sw-toolbox/companion.js" data-service-worker="sw-with-toolbox.js"></script>

Array can be generated

30.06.2016

11

Browser Support

Fallback for Safari & Co.

• AppCache

• Less features

• Not much choice for Caching Patterns

• Cache only

• Network only

30.06.2016

12

Storing data locally

Storing Data while offline

• LocalStroage

• WebDb (deprecated but here)

• IndexedDb

• Good idea: Use an abstraction, like PouchDB

• Challange: Quotas!

30.06.2016

13

Immediate Value

App Shell

• Shell is cached(Service Worker)

• Uses cached data(e. g. PouchDb)

• Can be displayedimmediately

• Updates cached viewwith online-data whenloadad

App Shell

Content

30.06.2016

14

"Install" to Home Screen

{

"name": "Flight PWA-Demo",

"short_name": "Flight-PWA",

"icons": [{

"src": "images/touch/icon-128x128.png",

"sizes": "128x128",

"type": "image/png"

}, […] ],

"start_url": "/index.html?homescreen=1",

"display": "standalone",

[…]

}

Referencing the Manifest

<!-- Web Application Manifest -->

<link rel="manifest" href="manifest.json">

<!-- Add to homescreen for Safari on iOS -->

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<meta name="apple-mobile-web-app-title" content="Web Starter Kit">

<link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">

30.06.2016

15

Background Sync

Background Sync

• App can request Background Sync

• Service Worker triggers Sync Event when it is appropriate(Network, Battery …)

• Also plans for periodic Background Sync

30.06.2016

16

Request Background Sync in Applet nav: any = navigator;

if ('serviceWorker' in nav && 'SyncManager' in window) {

nav.serviceWorker.ready

.then(reg => {

return reg.sync.register('upload');

})

.catch(_ => {

return this.buchungService.upload();

});

} else {

this.buchungService.upload();

}

Tag

Sync Event in Service Worker

context.addEventListener('sync', function(event) {

console.debug("Service Worker: sync, tag=" + event.tag);

if (event.tag == 'upload') {

event.waitUntil(bs.upload().then(_ => console.debug('background-upload finished')));

}

});

30.06.2016

17

Push Notifications

Push Notifications

Browser

Push-Service

Web API

4. Notification

2. Passing Id

3. Notification for Browser(s)

1. Register

30.06.2016

18

Registering for Push in App

let nav:any = navigator;

if ('serviceWorker' in navigator) {

nav.serviceWorker.ready.then(function(reg) {

reg.pushManager.subscribe({

userVisibleOnly: true

}).then(function(sub) {

console.log('endpoint:', sub.endpoint);

// Send endpoint with id over to web api

});

}).catch(function(error) { […] });

}

React to Push in Service Worker

context.addEventListener('push', function(event: any) {

event.waitUntil(bs.sync().then(p => context.registration.showNotification("Delay", {

body: 'Your flight is delayed',

icon: '/images/touch/icon-128x128.png',

tag: 'my-tag'

})));

});

30.06.2016

19

Angular Mobile Toolkit

Mobile Toolkit

• Scaffolding Angular 2 PWA withAngular CLI

• Helps to get started

• Generates Web App Manifest

• Generates App Shell• Angular Universal

• Service Worker for Caching• AppCache as Fallback for Safari & Co.

30.06.2016

20

Getting Started

> npm install -g angular-cli

> ng new hello-mobile --mobile

Infos and Guids: mobile.angular.io

Summary

Best of Web and Native

Progressive Enhancements

Offline Browser DBs

Background Sync

PushAngular

Mobile Toolkit

M&M's solvenearly all

problems ;-)

30.06.2016

21

Contact

[email protected]

SOFTWAREarchitekt.at

ManfredSteyer