Progressive Web Apps (PWAs) in der Praxis

Zuerst erschienen in Java Aktuell 03/2020 (ijug.eu)

Oft macht das Aufrufen von Webseiten und die Benutzung von komplexeren Webanwendungen unterwegs oder auf mobilen Geräten wenig Spaß. Native Anwendungen sind hier klar im Vorteil, denn diese sind offline und vor allem bequemer aufzurufen als Webseiten. Der Begriff “Progressive Web App” steht für eine Sammlung von Konzepten und Techniken, welche Webseiten und Webanwendungen wieder attraktiv werden lassen. Sie helfen dabei, Webanwendungen schneller und bei fehlender Internetverbindung auch offline laden zu lassen. Außerdem sollen sie imstande sein, auf unterschiedliche Endgeräte flexibel zu reagieren. In diesem Artikel wird die Philosophie der Progressive Web Apps erklärt und gezeigt, wie das Ganze technisch funktioniert.

Als Apple im Jahre 2007 das erste iPhone der Weltöffentlichkeit vorstellte, war es eigentlich angedacht, Anwendungen auf dem Gerät standardmäßig mit HTML, CSS, JavaScript und Ajax, damals auch unter Web 2.0 bekannt, zu erstellen. Der Safari Browser sollte hierfür Schnittstellen zu tieferen Schichten des Telefons anbieten. Diese Idee war für damalige Verhältnisse extrem innovativ und vorausschauend, da es die Hürde, eine Anwendung zu erstellen im Vergleich zu anderen Herstellern bedeutend niedriger machte. Apple erkannte schon sehr früh, dass ein Browser nicht nur für das Rendern von Webseiten geeignet ist, sondern vielmehr als Plattform für komplexe Anwendungen dienen kann. Leider waren die Möglichkeiten von HTML zu der Zeit begrenzt und HTML5 ließ noch eine Weile auf sich warten. Daher und auch aus marketingtechnischen Gründen änderte Apple diese Strategie zugunsten von nativ entwickelten Anwendungen, die über einen extra Marktplatz, den App Store, vertrieben wurden.

Die Jahre vergingen und die verschiedenen Browser wurden nicht zuletzt auch durch die mächtigen HTML5-Schnittstellen, die es erlauben auf Hardware und Dateien zuzugreifen, tatsächlich immer mehr zu “App-Engines”. Diese sind in der Lage, komplexe Anwendungen unabhängig vom Betriebssystem oder Gerät auszuführen. CSS3 tat sein Übriges, denn aufwändige Animationen und grafische Spielereien sind damit relativ einfach umsetzbar. Responsive Layouts (“Mobile First”) werden zum Standard. Immer mehr sogenannte Cross-Plattform Frameworks erobern den Markt (z.B. Xamarin, Electron.io, React-Native, usw.). Die Grenzen zwischen Web und Desktop, Geräten und Betriebssystemen verschwimmen zusehends.

Mit der Einführung der Web Worker und Service Worker war auch der Grundstein für Progressive Web Apps (PWAs) gelegt. Als treibende Kraft hinter den PWAs hat Google hier viel Pionierarbeit geleistet und gewisse Standards definiert. Hinter diesem Begriff steckt letztendlich eine Vielzahl von Ideen und Konzepten, die alle darauf abzielen, eine Webanwendung mehr wie eine native Anwendung anfühlen zu lassen. Eine der wichtigsten Überlegungen ist: Wie kann der Zugang zu einer Anwendung für möglichst viele Benutzer und damit also für unterschiedlichste Umgebungen (Browser, Betriebssystem, Gerät) so einfach wie möglich gestaltet werden? Die Anwendung selbst soll

•     so schnell wie möglich erste sinnvolle Ergebnisse liefern  
•     auf Umgebungen, die wenig Features anbieten sinnvolle Ergebnisse liefern
•     auf Umgebungen, die vollen Funktionsumfang liefern, diesen auch nutzen
•     offline sinnvolle Ergebnisse liefern
•     so einfach wie möglich installierbar sein
•     sicher sein
•     aus Marketinggründen dafür sorgen, dass die Benutzer so wenig wie möglich gleich wieder abspringen

Es gibt einige Beispiele von Webseiten, die nach der Einführung von PWAs ungewöhnlich signifikante positive Änderungen von KPIs (wie Umsatz oder Benutzerzahlen) vorweisen können. Unter www.pwastats.com gibt es sogar eine Webseite, die solche Erfolgsgeschichten sammelt – und selbst eine PWA ist.

Die Bausteine, die eine gewöhnliche Webseite zu einer Progressive Web App machen, sind zunächst übersichtlich. Es steckt aber allerhand Überlegungsarbeit in der konzeptionellen Implementierung. Wir benötigen:

•     HTML, CSS, etwas JavaScript
•     eine Service Worker Datei
•     eine Web App Manifest Datei
•     etwas Markup und JavaScript zum Zusammenstecken
•     HTTPS: PWAs dürfen nur über HTTPS aufgerufen werden

Das in Listing 1 dargestellte HTML Markup ist das zunächst notwendige Gerüst. Hier ist vorerst noch nichts Spannendes zu sehen, wir werden dieses Gerüst aber nun Schritt für Schritt erweitern.

<LISTING 1> 

<!DOCTYPE html> 

<html> 

<head> 

 <title>My super PWA</title> 

 <link rel="stylesheet" href="./style.css"> 

</head> 

<body> 

 <div>Hier kommt später der eigentliche Inhalt</div> 

 <script src="./app.js"></script> 

</body> 

</html> 

Listing 1: index.html - Grundgerüst der Webanwendung

<LISTING 2> 

self.addEventListener('install', (event) => { 

 event.waitUntil( 

 caches.open('v1').then((cache) => { 

 return cache.addAll([ 

 '/', 

 '/index.html', 

 '/images/logo.png' 

 ]); 

 }) 

 ); 

}); 

self.addEventListener('fetch', (event) => { 

 event.respondWith( 

 caches.match(event.request).then((response) => { 

 return response || fetch(event.request); 

 }) 

 ); 

}); 

<LISTING 3> 

if ('serviceWorker' in navigator) { 

 window.addEventListener('load', function() { 

 navigator.serviceWorker.register('/service-worker.js'); 

 }); 

} 

<LISTING 4> 

{ 

 "name": "PWA Notes Example", 

 "short_name": "PWA-Notes", 

 "theme_color": "#2196f3", 

 "background_color": "#2196f3", 

 "display": "standalone", 

 "scope": "/", 

 "icons": [ 

 { 

 "src": "/android-chrome-192x192.png", 

 "sizes": "192x192", 

 "type": "image/png" 

 }, 

 { 

 "src": "/android-chrome-512x512.png", 

 "sizes": "512x512", 

 "type": "image/png" 

 } 

 ] 

} 

<LISTING 5> 

<!DOCTYPE html> 

<html> 

<head> 

 <title>PWA Notes Example</title> 

 <link rel="stylesheet" href="./stylesheets/style.css"> 

 <link rel="manifest" href="/manifest.json"> 

</head> 

<body> 

 <div>Hier kommt der Inhalt</div> 

 <script src="./javascripts/app.js"></script> 

</body> 

</html> 

<LISTING 6> 

// Import der Workbox Bibliothek 

importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js'); 

 

// Route registrieren, die js und css Dateien cached 

workbox.routing.registerRoute( 
 /\.(?:js|css)$/, 
 new workbox.strategies.StaleWhileRevalidate({ 
 cacheName: 'static-resources', 
 }) 
); 

 

// Route registrieren, die Bilder cached (Mit Verfallsdatum) 

workbox.routing.registerRoute( 
 /\.(?:png|gif|jpg|jpeg|webp|svg)$/, 
 new workbox.strategies.CacheFirst({ 
 cacheName: 'images', 
 plugins: [ 
 new workbox.expiration.Plugin({ 
 maxEntries: 60, // Maximal 60 Bilder 
 maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Tage 
 }), 
 ], 
 }) 
);