SlideShare ist ein Scribd-Unternehmen logo
PROGRESSIVE WEB APPS
Sebastian Blum
VORSTELLUNG
SEBASTIAN BLUM
Entwickler
Individualentwicklung, primär mit Symfony
Technischer Berater
SEO, SEA, Tracking, Tag Manager
VORTRAG
AGENDA PROGRESSIVE WEB APPS
‣ Einsatzgebiet und Zweck
Was sind PWAs und wie können sie eingesetzt werden?
‣ Integration
Wie bekomme ich meine erste Progressive Web App?
‣ Debugging
Wie funktioniert die Fehlersuche?
‣ Erkenntnisse aus dem Einsatz
Was sind die Fallstricke bei der Verwendung?
EINSATZGEBIET UND ZWECK
Teil 1
PROGRESSIVE WEB APPS – EINSATZGEBIET UND ZWECK
AKTUELLER STAND (FEBRUAR 2018)
PROGRESSIVE WEB APPS – EINSATZGEBIET UND ZWECK
VORTEILE
Progressive Responsive Verbindungs-

unabhängig
Natives

Look & Feel
Sicher Verlinkbar
PROGRESSIVE WEB APPS – EINSATZGEBIET UND ZWECK
Quelle: https://developers.google.com/web/fundamentals/architecture/app-shell
PROGRESSIVE WEB APPS – EINSATZGEBIET UND ZWECK
GRUNDSATZ: APP(LICATION) SHELL
▸ Einfaches Designkonzept um mit HTML, CSS und JavaScript eine
Benutzeroberfläche zu realisieren
▸ Anforderungen
▸ Minimales Grundgerüst, individuell cachebar
▸ Natives App-Empfinden
▸ Sparsame Datennutzung
Quelle: https://developers.google.com/web/fundamentals/architecture/app-shell
PROGRESSIVE WEB APPS – EINSATZGEBIET UND ZWECK
GRUNDSATZ: SERVICE WORKERS
▸ Im Hintergrund laufendes JavaScript
▸ Ermöglicht
▸ Offline-Nutzung
▸ Push-Benachrichtigungen
▸ Inhaltsaktualisierung
▸ Content Caching / Fetching
▸ Inhaltsmanipulation
PROGRESSIVE WEB APPS – EINSATZGEBIET UND ZWECK
GRUNDSATZ: APP MANIFEST
▸ Einfache JSON-Datei
▸ Ermöglicht Installation auf dem Homescreen über den Browser
▸ Bietet eine „App-ähnliche“ Benutzerumgebung
PROGRESSIVE WEB APPS – EINSATZGEBIET UND ZWECK
FUNKTIONEN
▸ Offline-Zugriff auf bereits besuchte Seiten und

Darstellung einer Offline-Seite
▸ Leistungssteigerung durch lokales Speichern von Ressourcen
▸ Nutzung browserspezifischer Funktionen, z. B. Push-Benachrichtigungen
PROGRESSIVE WEB APPS – EINSATZGEBIET UND ZWECK
WEBSEITE VS. PWA APPVS.
INTEGRATION
Teil 2
PROGRESSIVE WEB APPS – INTEGRATION
VORAUSSETZUNGEN
▸ HTTPS

Service Worker benötigen eine verschlüsselte Verbindung
▸ /manifest.json

Titel und Beschreibung der PWA, Icons,

Farben und Art der Browser-Darstellung
▸ /sw.js

Service Worker zur Steuerung der PWA
PROGRESSIVE WEB APPS – INTEGRATION
MANIFEST.JSON
Möglich:
‣ standalone
‣ minimal-ui
{
"name": "Sebastian Blum GmbH",
"short_name": "sblum",
"description": "Sebastian Blum GmbH aus Zolling in der Nähe von München",
"lang": "de",
"start_url": "./",
"display": "standalone",
"orientation": "any",
"background_color": "#fafafa",
"theme_color": "#9b348e",
"icons": [
{
"src": "icon-64x64.png",
"sizes": "64x64",
"type": "image/png"
},
{ ... }
]
}
PROGRESSIVE WEB APPS – INTEGRATION
HTML INTEGRATION
Ist kein Service Worker registriert
→ Installation nach dem Aufruf
<link rel="manifest" href="/manifest.json">
<script>
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("sw.js");
}
</script>
PROGRESSIVE WEB APPS – INTEGRATION
PROGRESSIVE WEB APPS – INTEGRATION
PROGRESSIVE WEB APPS – INTEGRATION
PHASE 1: INSTALLATION
Konstanten für
‣ Cache-Namen
‣ Offline-URL
const VERSION = "1.0";
const CACHE_VERSION = "sblum-offline-v" + VERSION;
const OFFLINE_URL = "/offline";
let cacheablePages = [
"/",
"/offline",
"/css/public.css",
"/fonts/font-awesome/fontawesome-webfont.woff2",
"/img/header/homepage.jpg",
"/img/logo/logo.svg",
"/js/public.js"
];
// Pre-Cache all cacheable pages
self.addEventListener("install", event => {
event.waitUntil(caches.open(CACHE_VERSION)
.then(cache => {
return cache.addAll(cacheablePages);
})
.then(() => {
return self.skipWaiting();
})
);
});
Bei Seitenaufruf zu
cachende Seiten
PROGRESSIVE WEB APPS – INTEGRATION
PHASE 2: ACTIVATE
Veraltete

Caches leeren
// Cleanup old cache storages
self.addEventListener("activate", event => {
event.waitUntil(
caches.keys()
.then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
if (CACHE_VERSION !== cacheName) {
return caches.delete(cacheName);
}
})
);
})
);
});
Ist bereits ein Service Worker installiert und aktiviert
→ Überspringen der Phasen 1 und 2
PROGRESSIVE WEB APPS – INTEGRATION
PHASE 3: FETCH / MESSAGE
self.addEventListener("fetch", (event) => {
event.respondWith(
caches.match(event.request)
.then(response => {
if (response) {
return response;
}
// Version #1: Cache all (!) responses and return error page
// Clone the request
let fetchRequest = event.request.clone();
(…)
Service Worker wartet auf Fetch-Event
Kann die Response aus dem Cache-Storage bedient werden?
Version 1: Der Request wird geklont, sein HTTP-Statuscode geprüft

und die Antwort im Cache-Storage für zukünftige Anfragen gespeichert
PROGRESSIVE WEB APPS – INTEGRATION
PHASE 3: FETCH / MESSAGE
(…)
return fetch(fetchRequest)
.then(response => {
// Check response
if (!response || response.status !== 200 || response.type !== 'basic') {
return response;
}
// Clone the response
let responseToCache = response.clone();
caches.open(CACHE_VERSION)
.then(cache => {
cache.put(event.request, responseToCache);
});
return response;
})
.catch(() => {
return caches.match(OFFLINE_URL);
});
})
PROGRESSIVE WEB APPS – INTEGRATION
PHASE 3: FETCH / MESSAGE
(…)
// Version #2: Return error page
return fetch(event.request)
.catch(() => {
return caches.match(OFFLINE_URL);
});
})
Version 2: Den Request wieder an den Online-Server weitergeben
Sollte die Antwort fehlerhaft sein (offline oder Server-Fehler)

wird automatisch die Offline-Seite ausgeliefert.
PROGRESSIVE WEB APPS – INTEGRATION
PHASE 4: REDUNDANT
▸ Stoppen des Service Workers, wenn
▸ Die Installation fehlschlägt
▸ Die Aktivierung fehlschlägt
▸ Ein neuer Service Worker vorhanden ist
DEBUGGING
Teil 3
PROGRESSIVE WEB APPS – DEBUGGING
GOOGLE CHROME
Application » Manifest
‣ Interpretation der „manifest.json”
PROGRESSIVE WEB APPS – DEBUGGING
GOOGLE CHROME
Application » Service Worker
‣ Status des Service Workers
‣ Neuinstallation über „Update on reload”
‣ Entfernen über „Unregister”
PROGRESSIVE WEB APPS – DEBUGGING
GOOGLE CHROME
Application » Clear Storage
‣ Löschen aller Elemente der aktuellen PWA
PROGRESSIVE WEB APPS – DEBUGGING
GOOGLE CHROME
Application » Cache Storage
‣ Übersicht der Cache Storages
‣ Details zu den gecacheten Dateien
PROGRESSIVE WEB APPS – DEBUGGING
AUDITS
▸ Prüfung der PWA auf Optimierungspotential
▸ Open-Source Tool Lighthouse
▸ Testen grundlegender Bedingungen
▸ Registrierung des Service Workers
▸ Auslieferung über HTTPS
▸ Testen zusätzlicher Funktionen (Offline-Seite, Splash-Screen etc.)
Nutzung über die Kommandozeile

NPM-Paket → GoogleChrome/lighthouse
PROGRESSIVE WEB APPS – DEBUGGING
PROGRESSIVE WEB APPS – DEBUGGING
SERVICE WORKER NACHTRÄGLICH ENTFERNEN
if ("serviceWorker" in navigator) {
navigator.serviceWorker.getRegistrations().then(registrations => {
for (let registration of registrations) {
registration.unregister();
}
});
}
Fehler im Service Worker?
Ein Entfernen ist zum Glück möglich.
ERKENNTNISSE
Teil 4
PROGRESSIVE WEB APPS – ERKENNTNISSE
PROGRESSIVE ARBEITEN
▸ Nicht beim ersten Rollout alles integrieren
▸ Caching überlegt einsetzen
▸ Update-Strategie entwickeln
VIELEN DANK

FÜR EURE AUFMERKSAMKEIT
Sebastian Blum
sb@sblum.de
Präsentation auf der Website
https://www.sblum.de/seocampixx

Weitere ähnliche Inhalte

Was ist angesagt?

QS-Tag 2015 - Web Layout Testing mit Galen und webmate
QS-Tag 2015 - Web Layout Testing mit Galen und webmateQS-Tag 2015 - Web Layout Testing mit Galen und webmate
QS-Tag 2015 - Web Layout Testing mit Galen und webmate
Michael Mirold
 
Tag Manager Professional
Tag Manager ProfessionalTag Manager Professional
Tag Manager Professional
Sebastian Blum
 
AOEconf17: How to eat an elePHPant, congstar style - Timo Fuchs & Stefan Rotsch
AOEconf17: How to eat an elePHPant, congstar style - Timo Fuchs & Stefan RotschAOEconf17: How to eat an elePHPant, congstar style - Timo Fuchs & Stefan Rotsch
AOEconf17: How to eat an elePHPant, congstar style - Timo Fuchs & Stefan Rotsch
AOE
 
Continuous Delivery
Continuous DeliveryContinuous Delivery
Continuous Delivery
Axel Fontaine
 
3. Night of the pack
3. Night of the pack3. Night of the pack
3. Night of the pack
🙌 Christoph Häckel
 
Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )
Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )
Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )
guest9606ac
 

Was ist angesagt? (6)

QS-Tag 2015 - Web Layout Testing mit Galen und webmate
QS-Tag 2015 - Web Layout Testing mit Galen und webmateQS-Tag 2015 - Web Layout Testing mit Galen und webmate
QS-Tag 2015 - Web Layout Testing mit Galen und webmate
 
Tag Manager Professional
Tag Manager ProfessionalTag Manager Professional
Tag Manager Professional
 
AOEconf17: How to eat an elePHPant, congstar style - Timo Fuchs & Stefan Rotsch
AOEconf17: How to eat an elePHPant, congstar style - Timo Fuchs & Stefan RotschAOEconf17: How to eat an elePHPant, congstar style - Timo Fuchs & Stefan Rotsch
AOEconf17: How to eat an elePHPant, congstar style - Timo Fuchs & Stefan Rotsch
 
Continuous Delivery
Continuous DeliveryContinuous Delivery
Continuous Delivery
 
3. Night of the pack
3. Night of the pack3. Night of the pack
3. Night of the pack
 
Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )
Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )
Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )
 

Ähnlich wie Einführung Progressive Web App

Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
Manfred Steyer
 
Automatisierung mit grunt
Automatisierung mit gruntAutomatisierung mit grunt
Automatisierung mit grunt
Christian Keuerleber
 
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
Marc Müller
 
B1 Acocon Lotus Day 08.09.2009
B1 Acocon Lotus Day 08.09.2009B1 Acocon Lotus Day 08.09.2009
B1 Acocon Lotus Day 08.09.2009
Andreas Schulte
 
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Christian Janz
 
Basta Spring 2017 - DevOps&#58; Automatisieren der Deployment-Prozesse mit Te...
Basta Spring 2017 - DevOps&#58; Automatisieren der Deployment-Prozesse mit Te...Basta Spring 2017 - DevOps&#58; Automatisieren der Deployment-Prozesse mit Te...
Basta Spring 2017 - DevOps&#58; Automatisieren der Deployment-Prozesse mit Te...
Marc Müller
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Patrick Lauke
 
Webcast SAP Cloud Platform 2 - Developing Tools
Webcast SAP Cloud Platform 2 - Developing ToolsWebcast SAP Cloud Platform 2 - Developing Tools
Webcast SAP Cloud Platform 2 - Developing Tools
Patric Dahse
 
Technisches SEO 2019 Berlin SEO Campixx
Technisches SEO 2019 Berlin SEO CampixxTechnisches SEO 2019 Berlin SEO Campixx
Technisches SEO 2019 Berlin SEO Campixx
Alona Demchyk (Hakel)
 
Hybride Schönheit - Das Java/JavaScript Webframeworks Echo
Hybride Schönheit - Das Java/JavaScript Webframeworks EchoHybride Schönheit - Das Java/JavaScript Webframeworks Echo
Hybride Schönheit - Das Java/JavaScript Webframeworks Echo
Benjamin Schmid
 
Mainframe-Zugriff via Java
Mainframe-Zugriff via JavaMainframe-Zugriff via Java
Mainframe-Zugriff via Java
Frank Rahn
 
PHP-SEO Vortrag SEOCampixx 2013 von Sebastian Blum
PHP-SEO Vortrag SEOCampixx 2013 von Sebastian BlumPHP-SEO Vortrag SEOCampixx 2013 von Sebastian Blum
PHP-SEO Vortrag SEOCampixx 2013 von Sebastian Blum
Sebastian Blum
 
Enterprise APEX
Enterprise APEXEnterprise APEX
Enterprise APEX
Oliver Lemm
 
Continuous Delivery with ansible
Continuous Delivery with ansibleContinuous Delivery with ansible
Continuous Delivery with ansible
thischke
 
Augmented Reality Workshop
Augmented Reality WorkshopAugmented Reality Workshop
Augmented Reality Workshop
argency
 
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
 
Das dreckige Dutzend - ADF Migration nach 12c in der IKB - DOAG 2014.
Das dreckige Dutzend - ADF Migration nach 12c in der IKB - DOAG 2014.Das dreckige Dutzend - ADF Migration nach 12c in der IKB - DOAG 2014.
Das dreckige Dutzend - ADF Migration nach 12c in der IKB - DOAG 2014.
Torsten Kleiber
 
Progressive Web Apps and TYPO3
Progressive Web Apps and TYPO3Progressive Web Apps and TYPO3
Progressive Web Apps and TYPO3
flossels
 
2019 DNUG #46: Mobil bis Desktop auf einen Schlag – Web-Anwendungen zu Progre...
2019 DNUG #46: Mobil bis Desktop auf einen Schlag – Web-Anwendungen zu Progre...2019 DNUG #46: Mobil bis Desktop auf einen Schlag – Web-Anwendungen zu Progre...
2019 DNUG #46: Mobil bis Desktop auf einen Schlag – Web-Anwendungen zu Progre...
Knut Herrmann
 
Mit OpenText Website Managemen: Die App der Pfalzwerke AG
Mit OpenText Website Managemen: Die App der Pfalzwerke AGMit OpenText Website Managemen: Die App der Pfalzwerke AG
Mit OpenText Website Managemen: Die App der Pfalzwerke AG
netmedianer GmbH
 

Ähnlich wie Einführung Progressive Web App (20)

Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
 
Automatisierung mit grunt
Automatisierung mit gruntAutomatisierung mit grunt
Automatisierung mit grunt
 
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
 
B1 Acocon Lotus Day 08.09.2009
B1 Acocon Lotus Day 08.09.2009B1 Acocon Lotus Day 08.09.2009
B1 Acocon Lotus Day 08.09.2009
 
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
 
Basta Spring 2017 - DevOps&#58; Automatisieren der Deployment-Prozesse mit Te...
Basta Spring 2017 - DevOps&#58; Automatisieren der Deployment-Prozesse mit Te...Basta Spring 2017 - DevOps&#58; Automatisieren der Deployment-Prozesse mit Te...
Basta Spring 2017 - DevOps&#58; Automatisieren der Deployment-Prozesse mit Te...
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
 
Webcast SAP Cloud Platform 2 - Developing Tools
Webcast SAP Cloud Platform 2 - Developing ToolsWebcast SAP Cloud Platform 2 - Developing Tools
Webcast SAP Cloud Platform 2 - Developing Tools
 
Technisches SEO 2019 Berlin SEO Campixx
Technisches SEO 2019 Berlin SEO CampixxTechnisches SEO 2019 Berlin SEO Campixx
Technisches SEO 2019 Berlin SEO Campixx
 
Hybride Schönheit - Das Java/JavaScript Webframeworks Echo
Hybride Schönheit - Das Java/JavaScript Webframeworks EchoHybride Schönheit - Das Java/JavaScript Webframeworks Echo
Hybride Schönheit - Das Java/JavaScript Webframeworks Echo
 
Mainframe-Zugriff via Java
Mainframe-Zugriff via JavaMainframe-Zugriff via Java
Mainframe-Zugriff via Java
 
PHP-SEO Vortrag SEOCampixx 2013 von Sebastian Blum
PHP-SEO Vortrag SEOCampixx 2013 von Sebastian BlumPHP-SEO Vortrag SEOCampixx 2013 von Sebastian Blum
PHP-SEO Vortrag SEOCampixx 2013 von Sebastian Blum
 
Enterprise APEX
Enterprise APEXEnterprise APEX
Enterprise APEX
 
Continuous Delivery with ansible
Continuous Delivery with ansibleContinuous Delivery with ansible
Continuous Delivery with ansible
 
Augmented Reality Workshop
Augmented Reality WorkshopAugmented Reality Workshop
Augmented Reality Workshop
 
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
 
Das dreckige Dutzend - ADF Migration nach 12c in der IKB - DOAG 2014.
Das dreckige Dutzend - ADF Migration nach 12c in der IKB - DOAG 2014.Das dreckige Dutzend - ADF Migration nach 12c in der IKB - DOAG 2014.
Das dreckige Dutzend - ADF Migration nach 12c in der IKB - DOAG 2014.
 
Progressive Web Apps and TYPO3
Progressive Web Apps and TYPO3Progressive Web Apps and TYPO3
Progressive Web Apps and TYPO3
 
2019 DNUG #46: Mobil bis Desktop auf einen Schlag – Web-Anwendungen zu Progre...
2019 DNUG #46: Mobil bis Desktop auf einen Schlag – Web-Anwendungen zu Progre...2019 DNUG #46: Mobil bis Desktop auf einen Schlag – Web-Anwendungen zu Progre...
2019 DNUG #46: Mobil bis Desktop auf einen Schlag – Web-Anwendungen zu Progre...
 
Mit OpenText Website Managemen: Die App der Pfalzwerke AG
Mit OpenText Website Managemen: Die App der Pfalzwerke AGMit OpenText Website Managemen: Die App der Pfalzwerke AG
Mit OpenText Website Managemen: Die App der Pfalzwerke AG
 

Einführung Progressive Web App

  • 2. VORSTELLUNG SEBASTIAN BLUM Entwickler Individualentwicklung, primär mit Symfony Technischer Berater SEO, SEA, Tracking, Tag Manager
  • 3. VORTRAG AGENDA PROGRESSIVE WEB APPS ‣ Einsatzgebiet und Zweck Was sind PWAs und wie können sie eingesetzt werden? ‣ Integration Wie bekomme ich meine erste Progressive Web App? ‣ Debugging Wie funktioniert die Fehlersuche? ‣ Erkenntnisse aus dem Einsatz Was sind die Fallstricke bei der Verwendung?
  • 5. PROGRESSIVE WEB APPS – EINSATZGEBIET UND ZWECK AKTUELLER STAND (FEBRUAR 2018)
  • 6. PROGRESSIVE WEB APPS – EINSATZGEBIET UND ZWECK VORTEILE Progressive Responsive Verbindungs-
 unabhängig Natives
 Look & Feel Sicher Verlinkbar
  • 7. PROGRESSIVE WEB APPS – EINSATZGEBIET UND ZWECK Quelle: https://developers.google.com/web/fundamentals/architecture/app-shell
  • 8. PROGRESSIVE WEB APPS – EINSATZGEBIET UND ZWECK GRUNDSATZ: APP(LICATION) SHELL ▸ Einfaches Designkonzept um mit HTML, CSS und JavaScript eine Benutzeroberfläche zu realisieren ▸ Anforderungen ▸ Minimales Grundgerüst, individuell cachebar ▸ Natives App-Empfinden ▸ Sparsame Datennutzung Quelle: https://developers.google.com/web/fundamentals/architecture/app-shell
  • 9. PROGRESSIVE WEB APPS – EINSATZGEBIET UND ZWECK GRUNDSATZ: SERVICE WORKERS ▸ Im Hintergrund laufendes JavaScript ▸ Ermöglicht ▸ Offline-Nutzung ▸ Push-Benachrichtigungen ▸ Inhaltsaktualisierung ▸ Content Caching / Fetching ▸ Inhaltsmanipulation
  • 10. PROGRESSIVE WEB APPS – EINSATZGEBIET UND ZWECK GRUNDSATZ: APP MANIFEST ▸ Einfache JSON-Datei ▸ Ermöglicht Installation auf dem Homescreen über den Browser ▸ Bietet eine „App-ähnliche“ Benutzerumgebung
  • 11. PROGRESSIVE WEB APPS – EINSATZGEBIET UND ZWECK FUNKTIONEN ▸ Offline-Zugriff auf bereits besuchte Seiten und
 Darstellung einer Offline-Seite ▸ Leistungssteigerung durch lokales Speichern von Ressourcen ▸ Nutzung browserspezifischer Funktionen, z. B. Push-Benachrichtigungen
  • 12. PROGRESSIVE WEB APPS – EINSATZGEBIET UND ZWECK WEBSEITE VS. PWA APPVS.
  • 14. PROGRESSIVE WEB APPS – INTEGRATION VORAUSSETZUNGEN ▸ HTTPS
 Service Worker benötigen eine verschlüsselte Verbindung ▸ /manifest.json
 Titel und Beschreibung der PWA, Icons,
 Farben und Art der Browser-Darstellung ▸ /sw.js
 Service Worker zur Steuerung der PWA
  • 15. PROGRESSIVE WEB APPS – INTEGRATION MANIFEST.JSON Möglich: ‣ standalone ‣ minimal-ui { "name": "Sebastian Blum GmbH", "short_name": "sblum", "description": "Sebastian Blum GmbH aus Zolling in der Nähe von München", "lang": "de", "start_url": "./", "display": "standalone", "orientation": "any", "background_color": "#fafafa", "theme_color": "#9b348e", "icons": [ { "src": "icon-64x64.png", "sizes": "64x64", "type": "image/png" }, { ... } ] }
  • 16. PROGRESSIVE WEB APPS – INTEGRATION HTML INTEGRATION Ist kein Service Worker registriert → Installation nach dem Aufruf <link rel="manifest" href="/manifest.json"> <script> if ("serviceWorker" in navigator) { navigator.serviceWorker.register("sw.js"); } </script>
  • 17. PROGRESSIVE WEB APPS – INTEGRATION
  • 18. PROGRESSIVE WEB APPS – INTEGRATION
  • 19. PROGRESSIVE WEB APPS – INTEGRATION PHASE 1: INSTALLATION Konstanten für ‣ Cache-Namen ‣ Offline-URL const VERSION = "1.0"; const CACHE_VERSION = "sblum-offline-v" + VERSION; const OFFLINE_URL = "/offline"; let cacheablePages = [ "/", "/offline", "/css/public.css", "/fonts/font-awesome/fontawesome-webfont.woff2", "/img/header/homepage.jpg", "/img/logo/logo.svg", "/js/public.js" ]; // Pre-Cache all cacheable pages self.addEventListener("install", event => { event.waitUntil(caches.open(CACHE_VERSION) .then(cache => { return cache.addAll(cacheablePages); }) .then(() => { return self.skipWaiting(); }) ); }); Bei Seitenaufruf zu cachende Seiten
  • 20. PROGRESSIVE WEB APPS – INTEGRATION PHASE 2: ACTIVATE Veraltete
 Caches leeren // Cleanup old cache storages self.addEventListener("activate", event => { event.waitUntil( caches.keys() .then(cacheNames => { return Promise.all( cacheNames.map(cacheName => { if (CACHE_VERSION !== cacheName) { return caches.delete(cacheName); } }) ); }) ); }); Ist bereits ein Service Worker installiert und aktiviert → Überspringen der Phasen 1 und 2
  • 21. PROGRESSIVE WEB APPS – INTEGRATION PHASE 3: FETCH / MESSAGE self.addEventListener("fetch", (event) => { event.respondWith( caches.match(event.request) .then(response => { if (response) { return response; } // Version #1: Cache all (!) responses and return error page // Clone the request let fetchRequest = event.request.clone(); (…) Service Worker wartet auf Fetch-Event Kann die Response aus dem Cache-Storage bedient werden? Version 1: Der Request wird geklont, sein HTTP-Statuscode geprüft
 und die Antwort im Cache-Storage für zukünftige Anfragen gespeichert
  • 22. PROGRESSIVE WEB APPS – INTEGRATION PHASE 3: FETCH / MESSAGE (…) return fetch(fetchRequest) .then(response => { // Check response if (!response || response.status !== 200 || response.type !== 'basic') { return response; } // Clone the response let responseToCache = response.clone(); caches.open(CACHE_VERSION) .then(cache => { cache.put(event.request, responseToCache); }); return response; }) .catch(() => { return caches.match(OFFLINE_URL); }); })
  • 23. PROGRESSIVE WEB APPS – INTEGRATION PHASE 3: FETCH / MESSAGE (…) // Version #2: Return error page return fetch(event.request) .catch(() => { return caches.match(OFFLINE_URL); }); }) Version 2: Den Request wieder an den Online-Server weitergeben Sollte die Antwort fehlerhaft sein (offline oder Server-Fehler)
 wird automatisch die Offline-Seite ausgeliefert.
  • 24. PROGRESSIVE WEB APPS – INTEGRATION PHASE 4: REDUNDANT ▸ Stoppen des Service Workers, wenn ▸ Die Installation fehlschlägt ▸ Die Aktivierung fehlschlägt ▸ Ein neuer Service Worker vorhanden ist
  • 26. PROGRESSIVE WEB APPS – DEBUGGING GOOGLE CHROME Application » Manifest ‣ Interpretation der „manifest.json”
  • 27. PROGRESSIVE WEB APPS – DEBUGGING GOOGLE CHROME Application » Service Worker ‣ Status des Service Workers ‣ Neuinstallation über „Update on reload” ‣ Entfernen über „Unregister”
  • 28. PROGRESSIVE WEB APPS – DEBUGGING GOOGLE CHROME Application » Clear Storage ‣ Löschen aller Elemente der aktuellen PWA
  • 29. PROGRESSIVE WEB APPS – DEBUGGING GOOGLE CHROME Application » Cache Storage ‣ Übersicht der Cache Storages ‣ Details zu den gecacheten Dateien
  • 30. PROGRESSIVE WEB APPS – DEBUGGING AUDITS ▸ Prüfung der PWA auf Optimierungspotential ▸ Open-Source Tool Lighthouse ▸ Testen grundlegender Bedingungen ▸ Registrierung des Service Workers ▸ Auslieferung über HTTPS ▸ Testen zusätzlicher Funktionen (Offline-Seite, Splash-Screen etc.) Nutzung über die Kommandozeile
 NPM-Paket → GoogleChrome/lighthouse
  • 31. PROGRESSIVE WEB APPS – DEBUGGING
  • 32. PROGRESSIVE WEB APPS – DEBUGGING SERVICE WORKER NACHTRÄGLICH ENTFERNEN if ("serviceWorker" in navigator) { navigator.serviceWorker.getRegistrations().then(registrations => { for (let registration of registrations) { registration.unregister(); } }); } Fehler im Service Worker? Ein Entfernen ist zum Glück möglich.
  • 34. PROGRESSIVE WEB APPS – ERKENNTNISSE PROGRESSIVE ARBEITEN ▸ Nicht beim ersten Rollout alles integrieren ▸ Caching überlegt einsetzen ▸ Update-Strategie entwickeln
  • 35. VIELEN DANK
 FÜR EURE AUFMERKSAMKEIT Sebastian Blum sb@sblum.de Präsentation auf der Website https://www.sblum.de/seocampixx