Einführung Progressive Web App

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)

VORTEILE
Progressive Responsive Verbindungs- 
unabhängig
Natives 
Look & Feel
Sicher Verlinkbar

Quelle: https://developers.google.com/web/fundamentals/architecture/app-shell

GRUNDSATZ: APP(LICATION) SHELL
▸ Einfaches Designkonzept um mit HTML, CSS und JavaScript eine
Benutzeroberﬂäche zu realisieren
▸ Anforderungen
▸ Minimales Grundgerüst, individuell cachebar
▸ Natives App-Empﬁnden
▸ Sparsame Datennutzung
Quelle: https://developers.google.com/web/fundamentals/architecture/app-shell

GRUNDSATZ: SERVICE WORKERS
▸ Im Hintergrund laufendes JavaScript
▸ Ermöglicht
▸ Ofﬂine-Nutzung
▸ Push-Benachrichtigungen
▸ Inhaltsaktualisierung
▸ Content Caching / Fetching
▸ Inhaltsmanipulation

GRUNDSATZ: APP MANIFEST
▸ Einfache JSON-Datei
▸ Ermöglicht Installation auf dem Homescreen über den Browser
▸ Bietet eine „App-ähnliche“ Benutzerumgebung

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

WEBSEITE VS. PWA APPVS.

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

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"
},
{ ... }
]
}

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>

PHASE 1: INSTALLATION
Konstanten für
‣ Cache-Namen
‣ Ofﬂine-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

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

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

(…)
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);
});
})

(…)
// 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 (ofﬂine oder Server-Fehler) 
wird automatisch die Ofﬂine-Seite ausgeliefert.

PHASE 4: REDUNDANT
▸ Stoppen des Service Workers, wenn
▸ Die Installation fehlschlägt
▸ Die Aktivierung fehlschlägt
▸ Ein neuer Service Worker vorhanden ist

PROGRESSIVE WEB APPS – DEBUGGING
GOOGLE CHROME
Application » Manifest
‣ Interpretation der „manifest.json”

GOOGLE CHROME
Application » Service Worker
‣ Status des Service Workers
‣ Neuinstallation über „Update on reload”
‣ Entfernen über „Unregister”

GOOGLE CHROME
Application » Clear Storage
‣ Löschen aller Elemente der aktuellen PWA

GOOGLE CHROME
Application » Cache Storage
‣ Übersicht der Cache Storages
‣ Details zu den gecacheten Dateien

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 (Ofﬂine-Seite, Splash-Screen etc.)
Nutzung über die Kommandozeile 
NPM-Paket → GoogleChrome/lighthouse

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.

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

Einführung Progressive Web App

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (6)

Ähnlich wie Einführung Progressive Web App

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

Einführung Progressive Web App