1
Orientation in Objects GmbH
Weinheimer Str. 6868309 Mannheim
PWA: Portable Webanwendungen statt
nativer Apps
1.0
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH
Abstract
Mobile First war gestern, Offline First heißt die neue Devise.Mit diesem Credo kommen Progressive Web Apps (PWA)nicht nur sehr nahe an native Smartphone-Applikationenheran, sie erhöhen vor allem die User Experience beifehlender oder sehr schlechter Internetverbindung undmüssen nicht mehr über App Stores ausgeliefert werden.Anhand einer Beispielapplikation werden wir dieGrundkonzepte wie Service Worker, Application Shell,Caching und Push Notifications diskutieren und einenAusblick auf die mobilen Anwendungen der Zukunft werfen.
2
2
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH
Ihre Sprecher
Trainer, Berater, Entwickler
3
Falk Sippach (@sippsack)
ArchitekturAgile Softwareentwicklung
CodequalitätCo-Organisator
Commiter DukeCon
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 4
To APP or to Web?
3
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 5
Native Apps
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 6
Mobile WebanwendungenTop 500 Mobile Apps vs. Top 500 Mobile Websites
15,7
7
0 2 4 6 8 10 12 14 16 18
Ø Besucher (Millionen/Monat)
App Webseite
11,9
186,9
0 50 100 150 200
Ø Zeit pro Benutzer (Minuten/Monat)
App Webseite
Quelle: comScore Mobile Metrix, U.S, 2017
4
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 7
Mobile Webanwendungen
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 8
Größe App vs. Web
5
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 9
Hybrid Apps
# Webanwendung im Container verpackt (Cordova)
# Unterstützung für verschiedene Plattformen
# Schnittstellen zum Betriebssystem/Ressourcen
# weitere Alternative: Cross-Plattform-Apps
# Generierung von Apps (unterschiedl. Plattformen)
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 10
Cordova
6
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 11
Alternative PWA?
#1 Offline-First (keine oder schwache Verbindung)
#2 Progressiv und responsiv
#3 Sicher (https)
#4 Push-Benachrichtigungen
#5 Schnelle Ladezeiten, stets up-to-date
#6 Suchmaschinen-tauglich, verlinkbar
#7 "Installierbar", App-ähnliches Verhalten
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 12
1. 75 % mehr Tweets geschickt
2. Absprungrate um 20 % runter
3. Push-Nachrichten bei
geschlossener PWA
Quelle: https://pwa.bar/
Success Story: Twitter
7
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 13
1. Einnahmen von User
Generated Ads um 44 % hoch
2. nur 150 KB groß (Android:
9,6 MB, iOS: 56 MB)
Quelle: https://pwa.bar/
Success Story: Pinterest
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 14
1. Ladezeiten von 11,91 auf
4,69 Sekunden
2. 90 % kleiner als die native
Android App
3. Nutzer verweilen länger
Success Story: Tinder
Quelle: https://pwa.bar/
8
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 15
Hello, PWA!
App-Shell
Service Worker
Caching
UX Patterns
Ausblick
PWA – will ich auch!
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 16
Hello, PWA!
9
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 17
Progressive
Web
Apps
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH
Progressive
18
enhancement
vs.
vs. Graceful Degradation
# Funktionalität Schritt für Schritt hinzufügen
10
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 19
Web
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 20
Apps
11
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 21
Erste Schritte zur PWA
#1 bestehende Webseite/-anwendung (HTML/CSS/JS)
#2 HTTPS verwenden
#3 Manifest-JSON hinzufügen
#4 Service Worker hinzufügen
#5 Daten cachen und aus Cache ausliefern
#6 Push-Benachrichtigungen einrichten
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 22
Offlinefähig
12
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 23
App-Shell
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 24
Application Shell
Quelle: https://developers.google.com/web/ilt/pwa/introduction-to-progressive-web-app-architectures
App Shell Inhalt
13
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 25
Application Shell
# HTML/CSS Grundgerüst
# weitere statische Ressourcen
# wenig Daten, schnell laden
# seitenspezifischen Inhalt asynchron nachladen
# statisch. und optional dynamischen Inhalt cachen
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 26
Web App Manifest
# JSON (siehe https://w3c.github.io/manifest/)
# Name, Kurzname, Beschreibung der App
# Hintergrund- und Themefarbe
# verschiedengroße Icons (Home-/Splashscreen)
# Sprache, Ausrichtung, Display, Start-URL, …
<link rel="manifest" href="manifest.json">
14
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 27
Web App Manifest{
"short_name": "Hallo","name": "Hallo, PWA!","icons": [{
"src": "images/icon_128.png","sizes": "128x128","type": "image/png" }, {...
}],"start_url": "./index.html","display": "standalone","background_color": "#2196f3","theme_color": "#2196f3"
}
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 28
Service Worker
15
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 29
Service Worker
# eine Art Interceptor/Proxy
# Steuerung des Netzwerk-Zugriffs
# Skript, das im Hintergrund läuft (Webworker)
# kein Zugriff auf den DOM
# Kommunikation mit Seite über postMessage
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH
Initialer Seitenaufruf (1/7)
30
Webseite Webserver
Cache
Daten anfordern
16
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH
Initialer Seitenaufruf (2/7)
31
Webseite Webserver
Cache
Service Worker
zurückgeben
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH
Initialer Seitenaufruf (3/7)
32
Webseite Webserver
Cache
Service Worker
Service Worker Installation vorbereiten
17
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH
Initialer Seitenaufruf (4/7)
33
Service WorkerWebseite Webserver
Cache
Daten anfordern
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH
Initialer Seitenaufruf (5/7)
34
Service WorkerWebseite Webserver
Cache
Daten
zurückgeben
18
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH
Initialer Seitenaufruf (6/7)
35
Service WorkerWebseite Webserver
Cache
Daten
cachen
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH
Initialer Seitenaufruf (7/7)
36
Service WorkerWebseite Webserver
Cache
Daten
zurückgeben
19
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 37
Registrierung
// Service Worker aus JavaScript-Datei registrieren
if ('serviceWorker' in navigator) {
navigator. serviceWorker.register ('/ serviceWorker.js ');
}
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 38
Registrierung
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator. serviceWorker.register ('/ sw.js ', {scope: './'})
.then((registration) => {
console.log('Registrierung erfolgreich.')
})
.catch((error) => {
console.log('Registrierung fehlgeschlagen:' + error );
});
});
}
20
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 39
Online Status
// Änderungen im Netzwerkstatus abonieren
window.addEventListener( 'online ', (event) => { ... });
window.addEventListener( 'offline ', (event) => { ... });
// adhoc-Abfrage ob online
if (navigator. onLine ) { ... }
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 40
Lebenszyklus
Quelle: https://developers.google.com/web/ilt/pwa/introduction-to-progressive-web-app-architectures
21
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 41
Service Worker Events
self.addEventListener( 'install ', (event) => { ... }); // InstallEvent
self.addEventListener( 'activate ', (event) => { ... }); // ExtendableEvent
self.addEventListener( 'message ', (event) => { ... }); // MessageEvent
self.addEventListener( 'fetch ', (event) => { ... }); // FetchEvent
self.addEventListener( 'sync ', (event) => { ... }); // SyncEvent
self.addEventListener( 'push ', (event) => { ... }); // PushEvent
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 42
Nicht unterbrechen!
addEventListener('install', event => {
event.waitUntil (async function() {
// Cache befülllen
const cache = ...
}());
});
22
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 43
Benachrichtigungen
# Notifications API (Benutzer erteilt Erlaubnis)
# App kann dem User modale Hinweise anzeigen
# Push Notifications über Drittanbieter (Google)
# User stimmt Registrierung auf Drittserver zu
# Backend schickt Nachricht an Drittserver
# Drittserver leitet Nachricht an Service Worker
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 44
Caching
23
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH
Offline Seitenaufruf (1/4)
45
Service WorkerWebseite Webserver
Cache
Daten anfordern
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH
Offline Seitenaufruf (2/4)
46
Service WorkerWebseite Webserver
Cache
Prüfen, ob Daten
bereits im Cache sind
24
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH
Offline Seitenaufruf (3/4)
47
Service WorkerWebseite Webserver
Cache
Daten
zurückgeben
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH
Offline Seitenaufruf (4/4)
48
Service WorkerWebseite Webserver
Cache
Daten
zurückgeben
25
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 49
Daten in den Cache
addEventListener( 'install ', event => {event.waitUntil(async function() {
const cache = await caches.open ('static-v1');await cache.addAll ([
'/', '/about/', '/static/styles.css']);
}());});
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 50
Daten aus dem Cache
addEventListener( 'fetch ', event => {event.respondWith(
self. caches.match (event.request).then((response) => {
if (response) {return response ; // cached response
}const fetchRequest = event.request.clone();return fetch(fetchRequest) ; // network reponse
}));
});
26
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 51
Fehlendes nachtragenaddEventListener('fetch', event => {
event.respondWith(self.caches.match(event.request)
.then((response) => {if (response) {
return response; // cached response}const fetchRequest = event.request.clone();return fetch(fetchRequest).then((response) => {
if(!response || response.status !== 200 || response.type !== 'basic') {return response; // network reponse which should not be cached
}const responseToCache = response.clone();self.caches.open(name)
.then((cache) => cache.put(event.request, responseToCachereturn response; // network reponse
});})
);});
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 52
Caching Strategien
#1 Network or Cache
#2 Cache only
#3 Cache and update
#4 Cache, update and refresh
#5 Embedded fallback
27
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 53
UX-Patterns
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 54
Paradigmenwechsel
PWA-Verhalten != Benutzer-Erwartung
#1 PWAs können mehr, als erwartet
auch offline lauffähig
automatische Updates und Benachrichtigungen
Webseiten verhalten sich wie native Apps
#2 PWAs scheinen schlechter zu sein
Daten zeitweise veraltet
28
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 55
UX-Guidelines
#1 User führen und anleiten
#2 Zustände und Unwägbarkeiten sichtbar machen
#3 Background-Ereignisse kommunizieren
#4 Benutzer-Interaktion gewähren lassen
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 56
UX-Notifications
#1 Zustand des Service Workers kommunizieren
Offline-Status anzeigen
#2 Allgemeine Meldungen:
Caching komplett
Seite gecached
Aktion fehlgeschlagen, wird später fortgesetzt
Benachrichtigungen wurden eingeschaltet
29
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 57
User-Design
#1 Content springt nicht beim Nachladen
#2 Hilfstexte einblenden (Hinzufügen als App, …)
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 58
Fazit
30
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 59
Die Zukunft von PWAs
„By 2020, Progressive Web
Apps will have replaced 50%
of general-purpose consumer
facing apps.“
– Gartner Research
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 60
Alle im Boot?
# Initiator und Vorreiter: Chrome (Google)
# Early Adopter: Firefox
# Lange gewehrt: Apple Safari
# Hinkt etwas hinterher: Microsoft Edge (aber ist dabei)
31
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 61
Is Service Worker ready?
https://jakearchibald.github.io/isserviceworkerready/
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 62
Frameworks und Tools
Workbox
sw-precache
sw-toolbox
32
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 63
Entwicklung und Debuggen
https://developers.google.com/web/fundamentals/codelabs/debugging-service-workers/
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 64
PWA-Checkliste
#1 PWA Baseline Checklist
#2 Indexability & Social
#3 User Experience
#4 Performance
#5 Caching
#6 Push Benachrichtigungen
#7 Andere Features
https://developers.google.com/web/progressive-web-apps/checklist
33
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 65
PWAs als Windows-Apps
# First-Class-App-Citizens unter Windows 10
# PWAs im Windows App Store hochladbar
# Suchmaschine trägt PWAs in App Store ein
PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH
Links
• https://developers.google.com/web/ilt/pwa/• https://serviceworke.rs• https://jakearchibald.com/2016/caching-best-practices/• https://developers.google.com/web/showcase/• https://developers.google.com/web/ilt/pwa/introduction-to-progressive-web-app-architectures• https://developers.google.com/web/tools/lighthouse/• https://developers.google.com/web/tools/workbox/• https://github.com/NekR/offline-plugin• https://www.pwabuilder.com• https://github.com/pinterest/service-workers• https://github.com/GoogleChromeLabs• https://github.com/facebook/create-react-app• https://www.polymer-project.org/2.0/toolbox/• https://github.com/vuejs-templates/pwa• https://cli.angular.io/
66
34
Orientation in Objects GmbH
Weinheimer Str. 6868309 Mannheim
??
? ?
????
Fragen ?
Orientation in Objects GmbH
Weinheimer Str. 6868309 Mannheim
Vielen Dank für Ihre Aufmerksamkeit !