10. 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.
14. 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!
15. 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!');
});
16. 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 aktuelle
Daten ersetzt
App Shell
Content
17. 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">
18. 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
19. 26.09.2016
19
Background Sync anfordern
let 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')));
}
});
21. 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'
})));
});
22. 26.09.2016
22
Angular Mobile Toolkit
Mobile Toolkit
• Scaffolding für Angular 2 PWA mit
Angular CLI
• Hilft beim Start
• Generiert Web App Manifest
• Generiert App Shell
• Angular Universal
• Service Worker für Caching
• AppCache as Fallback for Safari & Co.
23. 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
Push
Angular
Mobile Toolkit
M&M's
können den
Tag retten!