SlideShare ist ein Scribd-Unternehmen logo
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
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
06.06.2019 4www.leonso.de
System für Bauprojektmanagement
 Bauplanung
 Vertragsmanagement
 Bautagebuch
 Protokolle
 Finanzkontrolle
 Dokumentation
 Qualitätsmanagement
 …
Mein aktuelles Projekt
Mein aktuelles Projekt
06.06.2019 5www.leonso.de
06.06.2019 6www.leonso.de
Mein aktuelles Projekt
Desktop
Laptop
Tablet
Mobile
Anforderung:
Anwendung muss immer und überall funktionieren
 Windows
 macOS
 iOS
 Android
 …
06.06.2019 7www.leonso.de
Mein aktuelles Projekt
Anforderung:
Anwendung muss immer und überall funktionieren
06.06.2019 8www.leonso.de
Mein aktuelles Projekt
Server: Domino
 Web Server
 Datenbank Server
 REST Services
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
✔
✔
✔ ~
~ ✘
~
✔ ✔ ✔ ✔
06.06.2019 10www.leonso.de
Was sind Progressive Web Apps?
06.06.2019 11www.leonso.de
Was sind Progressive Web Apps?
 normale Webanwendungen
 erweitert,
sodass sie wie Apps auf Mobilgeräten funktionieren
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
06.06.2019 13www.leonso.de
Wer entwickelt PWAs?
06.06.2019 14www.leonso.de
Wer entwickelt PWAs?
06.06.2019 15www.leonso.de
Welche Zutaten braucht eine PWA?
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“)
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:
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
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}`);
});
}
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
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'
]);
})
);
});
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);
})
);
});
Cache API
 speichert Request/Response Objekte-Paare
 gecachete Daten bleiben gespeichert
bis sie gelöscht oder überschrieben werden
06.06.2019 23www.leonso.de
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
06.06.2019 25www.leonso.de
IndexedDB
 Datenbank im Browser
 nutzbar von Webanwendung und Service Worker
 speichert Anwendungsdaten
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
weitere APIs
 Notifications API
 Push API
 Background Sync API
 Credential Management API
 Payment Request API
06.06.2019 27www.leonso.de
Quelle: Google IO 2018
06.06.2019 28www.leonso.de
Browser Kompatibilität
What Web Can Do Today
Can I use Service Worker
06.06.2019 29www.leonso.de
Browser Kompatibilität
06.06.2019 30www.leonso.de
Entwickler-Tools
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
06.06.2019 32www.leonso.de
Chrome DevTools – Audits – „Lighthouse“
 validiert PWA-Anforderungen
 Web App Manifest
 Service Worker
 HTTPS
Entwickler-Tools
Domino + React
Demo
06.06.2019 33www.leonso.de
06.06.2019 34www.leonso.de
Demo
PWA
Audit mit Lighthouse
Initiale Anwendung
06.06.2019 35www.leonso.de
Demo
06.06.2019 36www.leonso.de
Demo
+ 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
+ https
+ Hinweis JavaScript zu aktivieren
PWA
06.06.2019 38www.leonso.de
Audit mit Lighthouse
Demo
06.06.2019 39www.leonso.de
Demo
{
"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
+ manifest
PWA
06.06.2019 41www.leonso.de
Audit mit Lighthouse
Demo
06.06.2019 42www.leonso.de
Demo
+ 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
+ Service Worker
PWA
06.06.2019 44www.leonso.de
Audit mit Lighthouse
Demo
Offline?
JS/HTML/CSS
✔
Data
06.06.2019 45www.leonso.de
Demo
workbox.routing.registerRoute(
/(.*)data.xsp/data/(.*)/,
workbox.strategies.networkFirst({
cacheName: 'theater-cache'
})
);
06.06.2019 46www.leonso.de
Demo
Anwendungsdaten cachen
const bgSyncPlugin = new workbox.backgroundSync.Plugin(
'theater-queue',
{
callbacks: {
requestWillEnqueue: showNotificationEnqueue,
queueDidReplay: showNotificationSuccess,
}
}
);
06.06.2019 47www.leonso.de
Hintergrund-Synchronisation und Nachrichten
Demo
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
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
offline
wieder online
06.06.2019 50www.leonso.de
Demo
Service Worker - Nachrichten
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
Demo Code
https://github.com/KnutHerrmann/react-domino
06.06.2019 52www.leonso.de
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
Fragen?
06.06.2019 54www.leonso.de
Vielen Dank!
06.06.2019 55www.leonso.de

Weitere ähnliche Inhalte

Ähnlich wie 2019 DNUG #46: Mobil bis Desktop auf einen Schlag – Web-Anwendungen zu Progressiven Web Apps (PWA) erweitern

Progressive Web Apps and TYPO3
Progressive Web Apps and TYPO3Progressive Web Apps and TYPO3
Progressive Web Apps and TYPO3
flossels
 
OnPage SEO - Technik Grundlagen - Danny Linden
OnPage SEO - Technik Grundlagen - Danny LindenOnPage SEO - Technik Grundlagen - Danny Linden
OnPage SEO - Technik Grundlagen - Danny Linden
Danny Linden
 
Ionic 3
Ionic 3Ionic 3
Ivory Soa Suite
Ivory Soa SuiteIvory Soa Suite
Ivory Soa Suite
Predrag61
 
Mainframe-Zugriff via Java
Mainframe-Zugriff via JavaMainframe-Zugriff via Java
Mainframe-Zugriff via Java
Frank Rahn
 
Einführung in die webOS Programmierung
Einführung in die webOS ProgrammierungEinführung in die webOS Programmierung
Einführung in die webOS Programmierung
Markus Leutwyler
 
Wer braucht schon den (client-side) FB Pixel? Warum du auf Facebooks serverse...
Wer braucht schon den (client-side) FB Pixel? Warum du auf Facebooks serverse...Wer braucht schon den (client-side) FB Pixel? Warum du auf Facebooks serverse...
Wer braucht schon den (client-side) FB Pixel? Warum du auf Facebooks serverse...
AllFacebook.de
 
FMK2019 FileMaker Data API mit Node.js nutzen - Workshop by Adam Augustin
FMK2019 FileMaker Data API mit Node.js nutzen - Workshop by Adam AugustinFMK2019 FileMaker Data API mit Node.js nutzen - Workshop by Adam Augustin
FMK2019 FileMaker Data API mit Node.js nutzen - Workshop by Adam Augustin
Verein FM Konferenz
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenMayflower GmbH
 
Deployment mit Webistrano
Deployment mit WebistranoDeployment mit Webistrano
Deployment mit Webistrano
daniel.mattes
 
Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im Web
Sebastian Springer
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGap
Stefan Kolb
 
Chatbot Hackathon Slidedeck
Chatbot Hackathon SlidedeckChatbot Hackathon Slidedeck
Chatbot Hackathon Slidedeck
Allgeier (Schweiz) AG
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-Anwendungen
Jonathan Weiß
 
CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...
CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...
CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...
LeanIX GmbH
 
Frontend-Performance mit PHP
Frontend-Performance mit PHPFrontend-Performance mit PHP
Frontend-Performance mit PHP
Frank Kleine
 
Frontend-Performance @ IPC
Frontend-Performance @ IPCFrontend-Performance @ IPC
Frontend-Performance @ IPC
Nico Steiner
 
Gewinnung von OPEN SOURCE Techniken für junge Unternehmen
Gewinnung von OPEN SOURCE Techniken für junge UnternehmenGewinnung von OPEN SOURCE Techniken für junge Unternehmen
Gewinnung von OPEN SOURCE Techniken für junge Unternehmen
Bjoern Reinhold
 
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEESchnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Benjamin Schmid
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Gregor Biswanger
 

Ähnlich wie 2019 DNUG #46: Mobil bis Desktop auf einen Schlag – Web-Anwendungen zu Progressiven Web Apps (PWA) erweitern (20)

Progressive Web Apps and TYPO3
Progressive Web Apps and TYPO3Progressive Web Apps and TYPO3
Progressive Web Apps and TYPO3
 
OnPage SEO - Technik Grundlagen - Danny Linden
OnPage SEO - Technik Grundlagen - Danny LindenOnPage SEO - Technik Grundlagen - Danny Linden
OnPage SEO - Technik Grundlagen - Danny Linden
 
Ionic 3
Ionic 3Ionic 3
Ionic 3
 
Ivory Soa Suite
Ivory Soa SuiteIvory Soa Suite
Ivory Soa Suite
 
Mainframe-Zugriff via Java
Mainframe-Zugriff via JavaMainframe-Zugriff via Java
Mainframe-Zugriff via Java
 
Einführung in die webOS Programmierung
Einführung in die webOS ProgrammierungEinführung in die webOS Programmierung
Einführung in die webOS Programmierung
 
Wer braucht schon den (client-side) FB Pixel? Warum du auf Facebooks serverse...
Wer braucht schon den (client-side) FB Pixel? Warum du auf Facebooks serverse...Wer braucht schon den (client-side) FB Pixel? Warum du auf Facebooks serverse...
Wer braucht schon den (client-side) FB Pixel? Warum du auf Facebooks serverse...
 
FMK2019 FileMaker Data API mit Node.js nutzen - Workshop by Adam Augustin
FMK2019 FileMaker Data API mit Node.js nutzen - Workshop by Adam AugustinFMK2019 FileMaker Data API mit Node.js nutzen - Workshop by Adam Augustin
FMK2019 FileMaker Data API mit Node.js nutzen - Workshop by Adam Augustin
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
 
Deployment mit Webistrano
Deployment mit WebistranoDeployment mit Webistrano
Deployment mit Webistrano
 
Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im Web
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGap
 
Chatbot Hackathon Slidedeck
Chatbot Hackathon SlidedeckChatbot Hackathon Slidedeck
Chatbot Hackathon Slidedeck
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-Anwendungen
 
CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...
CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...
CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...
 
Frontend-Performance mit PHP
Frontend-Performance mit PHPFrontend-Performance mit PHP
Frontend-Performance mit PHP
 
Frontend-Performance @ IPC
Frontend-Performance @ IPCFrontend-Performance @ IPC
Frontend-Performance @ IPC
 
Gewinnung von OPEN SOURCE Techniken für junge Unternehmen
Gewinnung von OPEN SOURCE Techniken für junge UnternehmenGewinnung von OPEN SOURCE Techniken für junge Unternehmen
Gewinnung von OPEN SOURCE Techniken für junge Unternehmen
 
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEESchnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
 

2019 DNUG #46: Mobil bis Desktop auf einen Schlag – Web-Anwendungen zu Progressiven Web Apps (PWA) erweitern