Mit der Progressive Web App Technologie lassen sich JavaScript Web-Anwendungen einfach auf mobile Geräte erweitern. Durch Offline-Modus, blitzschnellem Laden, Push-Benachrichtigungen sowie der Nutzbarkeit fast aller Hardwareelemente (z.B. Kamera) fühlen sich diese Anwendungen wie native Mobilanwendungen an. Solche Anwendungen müssen nicht aus einem App-Shop heraus installiert werden, sondern lassen sich direkt von einer aufgerufenen Web-Anwendung im Browser mit einem Klick als App zum Startbildschirm mobiler Android und iOS Geräte hinzufügen. An einem praktischen Beispiel sehen wir uns die einzelnen Schritte zu einer Progressive Web App an. Wir kombinieren die optimalen Tools für die Client-Entwicklung mit IBM Domino als REST- und Webserver und bündeln die gesamte Anwendung in einer nsf.

2. 06.06.2019 2www.leonso.de
Knut Herrmann
 Senior Software Architekt
Leonso GmbH
 Notes Domino Entwickler
seit Version 2
 Web Anwendungsentwickler
 StackOverflow >850 Antworten
E-Mail: knut.herrmann@leonso.de / Twitter: @KnutHerrmann / Skype: knut.herrmann
2018 und 2019

3. 06.06.2019 3www.leonso.de
Vielen Dank an
Paul Harrison
Eight Dot Three Ltd
Co-Ersteller und -Vortragender eines ähnlichen
Vortrags zur engage.ug 2018 und ICONUK 2018

4. 06.06.2019 4www.leonso.de
System für Bauprojektmanagement
 Bauplanung
 Vertragsmanagement
 Bautagebuch
 Protokolle
 Finanzkontrolle
 Dokumentation
 Qualitätsmanagement
 …
Mein aktuelles Projekt

5. Mein aktuelles Projekt
06.06.2019 5www.leonso.de

6. 06.06.2019 6www.leonso.de
Mein aktuelles Projekt
Desktop
Laptop
Tablet
Mobile
Anforderung:
Anwendung muss immer und überall funktionieren
 Windows
 macOS
 iOS
 Android
 …

7. 06.06.2019 7www.leonso.de
Mein aktuelles Projekt
Anforderung:
Anwendung muss immer und überall funktionieren

8. 06.06.2019 8www.leonso.de
Mein aktuelles Projekt
Server: Domino
 Web Server
 Datenbank Server
 REST Services

9. 06.06.2019 9www.leonso.de
Mein aktuelles Projekt
Client: Browser (React.js & Co.)
 Windows, macOS, iOS, Android, …
 Desktop, Laptop, Tablet, Mobile
 Netzwerk, langsame Verbindung, Offline
✔
✔
✔ ~
~ ✘
~
✔ ✔ ✔ ✔

10. 06.06.2019 10www.leonso.de
Was sind Progressive Web Apps?

11. 06.06.2019 11www.leonso.de
Was sind Progressive Web Apps?
 normale Webanwendungen
 erweitert,
sodass sie wie Apps auf Mobilgeräten funktionieren

12. 06.06.2019 12www.leonso.de
Was sind Progressive Web Apps?
installierbar
auffindbar
netzwerkunabhängig
sicher interaktiv
progressiv
responsiv
verlinkbar
Quelle: https://docs.microsoft.com/de-de/microsoft-edge/progressive-web-apps

13. 06.06.2019 13www.leonso.de
Wer entwickelt PWAs?

14. 06.06.2019 14www.leonso.de
Wer entwickelt PWAs?

15. 06.06.2019 15www.leonso.de
Welche Zutaten braucht eine PWA?

16. 06.06.2019 16www.leonso.de
Web App Manifest
 einfache JSON Textdatei manifest.json
 Anwendungskonfiguration:
 Name / Kurzbezeichnung
 Icons
 Start URL
 Themenfarbe / Hintergrundfarbe
 Orientierung
 Anzeige („browser“, „standalone“, „fullscreen“)

17. 06.06.2019 17www.leonso.de
Web App Manifest
manifest.json:
{
"name": "PWA Demo",
"short_name": "PWA",
"description": "Progressive Web App Demo",
"orientation" : "portrait",
"start_url": "index.html",
"display": "standalone",
"icons": [{
"src": "icon/icon.png",
"sizes": "512x512",
"type": "image/png"
}],
"background_color": "#4e8ef7",
"theme_color": "#FF7F00"
}
<link rel="manifest" href="manifest.json">in index.html verlinken:

18. 06.06.2019 18www.leonso.de
Service Worker
 JavaScript Code
 läuft unabhängig vom Anwendungscode
 fängt Netzwerkanfragen ab und behandelt sie
 reagiert auf Ereignisse
 sendet Benachrichtigungen
 updatet sich selbst

19. 06.06.2019 19www.leonso.de
Service Worker
wird in Anwendungscode registriert (index.js):
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('./service-worker.js')
.then(registration => {
console.log(`Service Worker registered! Scope:
${registration.scope}`);
})
.catch(err => {
console.log(`Service Worker registration failed:
${err}`);
});
}

20. 06.06.2019 20www.leonso.de
Service Worker
 install – alle notwendigen Dateien werden gecachet
 activate – wird aktiviert, initialisiert Daten im Cache
 Idle – wartet auf einen Event (fetch / message / push)
 fetch - behandelt Netzwerk-Requests
 message – 2-Wege-Kommunikation mit Web Anwendung
 push – Meldungen vom Server
Lebenszyklus

21. 06.06.2019 21www.leonso.de
Service Worker
self.addEventListener('install', function(e) {
e.waitUntil(
caches.open('pwa-v1').then(function(cache) {
return cache.addAll([
'/', 'sw.js', 'index.html','index.js',
'style.css',
'images/myImage.jpeg'
]);
})
);
});

22. 06.06.2019 22www.leonso.de
Service Worker
self.addEventListener('activate', function(e) {
// initialisiere oder bereinige Cache
});
self.addEventListener('fetch', function(e) {
// Beispiel für ”Cache first, Network fallback”
e.respondWith(
caches.match(e.request).then(function(response) {
return response || fetch(e.request);
})
);
});

23. Cache API
 speichert Request/Response Objekte-Paare
 gecachete Daten bleiben gespeichert
bis sie gelöscht oder überschrieben werden
06.06.2019 23www.leonso.de

24. Cache Strategien
 Cache only
 Cache first, Network fallback
 Network first, Cache fallback
 Cache / network race
 Network only
06.06.2019 24www.leonso.de
Cache API

25. 06.06.2019 25www.leonso.de
IndexedDB
 Datenbank im Browser
 nutzbar von Webanwendung und Service Worker
 speichert Anwendungsdaten

26. Speicher-Limit für Cache und IndexedDB
Quelle: https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/offline-for-pwa
Browser Limit
Chrome < 6% des freien Plattenplatzes
Firefox < 10% des freien Plattenplatzes
Safari mobile < 50MB
Safari desktop freier Plattenplatz
Edge abhängig von Plattenplatz
06.06.2019 26www.leonso.de
Cache API und IndexedDB

27. weitere APIs
 Notifications API
 Push API
 Background Sync API
 Credential Management API
 Payment Request API
06.06.2019 27www.leonso.de

28. Quelle: Google IO 2018
06.06.2019 28www.leonso.de
Browser Kompatibilität

29. What Web Can Do Today
Can I use Service Worker
06.06.2019 29www.leonso.de
Browser Kompatibilität

30. 06.06.2019 30www.leonso.de
Entwickler-Tools

31. Chrome DevTools - Application
 aktuelles Web App Manifest
 Status Service Worker und Optionen um:
 Service Worker sofort neu zu laden
 Service Worker bei Netzwerk-Aktionen zu umgehen
 Netzwerk offline zu setzen
 Cache und Datenbank löschen
06.06.2019 31www.leonso.de
Entwickler-Tools

32. 06.06.2019 32www.leonso.de
Chrome DevTools – Audits – „Lighthouse“
 validiert PWA-Anforderungen
 Web App Manifest
 Service Worker
 HTTPS
Entwickler-Tools

33. Domino + React
Demo
06.06.2019 33www.leonso.de

34. 06.06.2019 34www.leonso.de
Demo

35. PWA
Audit mit Lighthouse
Initiale Anwendung
06.06.2019 35www.leonso.de
Demo

36. 06.06.2019 36www.leonso.de
Demo

37. + SSL auf Domino Server aktivieren
+ Zusatz in index.html
<noscript>
JavaScript muss aktiviert sein, um diese
Anwendung nutzen zu können.
</noscript>
06.06.2019 37www.leonso.de
Demo

38. + https
+ Hinweis JavaScript zu aktivieren
PWA
06.06.2019 38www.leonso.de
Audit mit Lighthouse
Demo

39. 06.06.2019 39www.leonso.de
Demo

40. {
"name": "Theater React Demo",
"short_name": "Theater",
"theme_color": "#9b0000",
"background_color": "#fffafa",
"display": "standalone",
"start_url": "./index.html",
"icons": [
{
"src": "icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
...
+ manifest.json
+ Icons
+ in index.html
06.06.2019 40www.leonso.de
<meta name="theme-color" content="#9b0000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
Demo

41. + manifest
PWA
06.06.2019 41www.leonso.de
Audit mit Lighthouse
Demo

42. 06.06.2019 42www.leonso.de
Demo

43. + Service Worker mit
service-worker.js
importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
workbox.precaching.precacheAndRoute([]);
index.js
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('./service-worker.js')
.then(registration => {
console.log(`Service Worker registered! Scope: ${registration.scope}`);
})
.catch(err => {
console.log(`Service Worker registration failed: ${err}`);
});
}
[ ] wird automatisch
mit der Liste der statischen
Dateien *.js, *.html, *.css
während des Builds gefüllt
06.06.2019 43www.leonso.de
Demo

44. + Service Worker
PWA
06.06.2019 44www.leonso.de
Audit mit Lighthouse
Demo

45. Offline?
JS/HTML/CSS
✔
Data
06.06.2019 45www.leonso.de
Demo

46. workbox.routing.registerRoute(
/(.*)data.xsp/data/(.*)/,
workbox.strategies.networkFirst({
cacheName: 'theater-cache'
})
);
06.06.2019 46www.leonso.de
Demo
Anwendungsdaten cachen

47. const bgSyncPlugin = new workbox.backgroundSync.Plugin(
'theater-queue',
{
callbacks: {
requestWillEnqueue: showNotificationEnqueue,
queueDidReplay: showNotificationSuccess,
}
}
);
06.06.2019 47www.leonso.de
Hintergrund-Synchronisation und Nachrichten
Demo

48. const networkWithBackgroundSync =
new workbox.strategies.NetworkOnly({
plugins: [bgSyncPlugin],
});
workbox.routing.registerRoute(
/(.*)data.xsp/data/(.*)/,
networkWithBackgroundSync,
'POST'
);
06.06.2019 48www.leonso.de
Hintergrund-Synchronisation und Nachrichten
Demo

49. const showNotificationSuccess = () => {
self.registration.showNotification(
'Background sync - executed request from queue', {
body: 'Ticket order accomplished successfully.',
icon: './icons/icon-512x512.png'
});
};
const showNotificationEnqueue = () => {
self.registration.showNotification(
'Background sync - put request in queue', {
body: 'Ticket order will be sent as soon as device is online
again.',
icon: './icons/icon-512x512.png'
});
};
06.06.2019 49www.leonso.de
Demo
Hintergrund-Synchronisation und Nachrichten

50. offline
wieder online
06.06.2019 50www.leonso.de
Demo
Service Worker - Nachrichten

51. Server: Domino
Client: Browser (React.js & Co.)
 Windows, macOS, iOS, Android, …
 Desktop, Laptop, Tablet, Mobile
 Netzwerk, langsame Verbindung, Offline
✔
✔
✔
✔ ✔ ✔ ✔
✔ ✔
✔ ✔
06.06.2019 51www.leonso.de
Mein aktuelles Projekt

52. Demo Code
https://github.com/KnutHerrmann/react-domino
06.06.2019 52www.leonso.de

53. Zusammenfassung
 PWAs sind einfach zu implementieren
 ein Code für alle Geräte und Betriebssysteme
 keine App-Stores notwendig
 implizite Updates
 zukunftsorientiert - PWAs können neue Browser-
Möglichkeiten nutzen, wenn und sobald sie verfügbar sind
06.06.2019 53www.leonso.de

54. Fragen?
06.06.2019 54www.leonso.de

55. Vielen Dank!
06.06.2019 55www.leonso.de