offlinefähige browseranwendungen: progressive web-apps mit angular 2
TRANSCRIPT
26.09.2016
1
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
Manfred Steyer
ManfredSteyer
Über mich …
• Manfred Steyer
• SOFTWAREarchitekt.at
• Trainer & Consultant
• GDE & MVP
• Focus: Angular 2
Page 2
ManfredSteyer
26.09.2016
2
Inhalt
Überblick
Offline mit Service Worker
Sofortiger Nutzen mit AppShell-Muster
Background Sync
Push
Angular Mobile Toolkit
Überblick
26.09.2016
3
Web Apps
Keine Installation
Cross-Plattform
Einfaches Deployment
Einfaches Update
DurchsuchbarLinks/
Bookmarks
Native Apps
Einfach zu starten
Sofortiger Nutzen
Offline
Langsame Verbindungen
Push Notifications
Gerätezugriff
26.09.2016
4
Progressive Web Apps bieten
das Beste aus beiden Welten
Progressive Enhancements: Offline, Caching, Home-Screen etc.
26.09.2016
5
App muss auch ohne Browser-Unterstützung für diese
Erweiterungen Nutzen bieten!
vs.
26.09.2016
6
[http://alistapart.com/article/understandingprogressiveenhancement]
Inhalt
Layout
Scripting mit Progressive Ext.
26.09.2016
7
Wie implementiert man Progressive Enhancements und PWA?
PWAs implementieren
Moderne Browser Technologien
•Service Worker
•Web App Manifest
• IndexedDb & Co.
Muster
•Caching Patterns
•App Shell Pattern
•Universal JS
26.09.2016
8
Case Study
Features
Offline
Background Sync
PushHome-Screen
Sofortiger Nutzen
26.09.2016
9
DEMO
Offline mit Service Worker
26.09.2016
10
Was sind Service Worker?
• Hintergrund-Tasks
• Werden von Web App installiert
• Können ohne Web App laufen
• Können sich deaktivieren und bei Ereignissen wieder aktivieren
• Nur HTTPS (außer localhost)
• Kein XHR, aber fetch
Service Worker und Offline
• Anfragen abfangen
• Entscheiden, wie auf Anfragen zu antworten ist
• Caching Muster• Cache only
• Network only
• Try cache first, then network
• Try network first, then cache
• etc.
26.09.2016
11
Service Worker registrieren
if('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js', { scope: '/' }).then((r) => { console.debug('service worker started!'); });
}
Service Worker Script
var context: any = self;
context.addEventListener('install', function(e:any) {
e.waitUntil(fillCache().then(() => context.skipWaiting()));
});
context.addEventListener('activate', function(e) {
e.waitUntil(clearOldCaches().then(() => context.clients.claim()));
});
context.addEventListener('fetch', function(event: any) {
event.respondWith(cacheFirst(event.request));
});
26.09.2016
12
FillCache and CacheFirst
function fillCache() {
return caches.open(CACHE_NAME)
.then(cache => cache.addAll(CACHE_FILES));
}
function cacheFirst(request) {
return caches.match(request)
.then(response => response || fetch(request));
}
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
26.09.2016
13
Browser Support
Fallback für Safari & Co.
• AppCache
• Weniger Feature
• Keine große Auswahl an Caching Patterns
• Cache only
• Network only
26.09.2016
14
Daten lokal speichern
Daten offline speichern
• LocalStroage
• WebDb (deprecated aber hier)
• IndexedDb
• Gute Idee: Abstraction nutzen, z. B. PouchDB
• Herausforderung: Quotas!
26.09.2016
15
Fokus
• Kein langfristiger Offlinebetrieb
• Überbrücken langsamer oder fehlender Datenverbindungen
PouchDb
const db = new PouchDB("bookingDb");
db.get('bookings').then(entity => {// do something with entity
});
var entity = {_id: "bookings",bookings: bookings
}
db.put(entity).then(_ => { console.debug('stored!');
});
26.09.2016
16
Sofortiger Nutzen
App Shell
• Shell im Cache(Service Worker)
• Daten aus Cache(e. g. PouchDb)
• Kann sofort angezeigt werden
• Daten aus Cache werden nach dem Laden durch aktuelleDaten ersetzt
App Shell
Content
26.09.2016
17
"Installation" am 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">
26.09.2016
18
Background Sync
Background Sync
• App fordert Background Sync an
• Service Worker führt Sync Event aus, wenn es passend erscheint (Netzwerk, Akku, …)
• Pläne für periodische Background Sync
26.09.2016
19
Background Sync anfordernlet 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')));
}
});
26.09.2016
20
Push Notifications
Push Notifications
Browser
Push-Service
Web API
4. Benachrichtigung
2. Url + ID
3. Benachrichtigung für Browser
1. Anmelden
26.09.2016
21
Für Push registrieren
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) { […] });
}
Auf Push in Service Worker reagieren
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'
})));
});
26.09.2016
22
Angular Mobile Toolkit
Mobile Toolkit
• Scaffolding für Angular 2 PWA mitAngular CLI
• Hilft beim Start
• Generiert Web App Manifest
• Generiert App Shell• Angular Universal
• Service Worker für Caching• AppCache as Fallback for Safari & Co.
26.09.2016
23
Getting Started
> npm install -g angular-cli
> ng new hello-mobile --mobile
Infos and Guids: mobile.angular.io
Summary
Das Beste von Web
und Native
Progressive Enhancements
Offline Browser DBs
Background Sync
PushAngular
Mobile Toolkit
M&M'skönnen den Tag retten!
