Warum du progressive Web Applikationen entwickeln solltest und wie das geht

Willst du eine App programmieren, aber die Komplexität nativer App Entwicklung bringt dich davon ab? Vielleicht ist die neue Herangehensweise an Software Entwicklung eine gute Lösung für dich. Diese neue Methode nennt man Progressive Web App (PWA). Ist das nur ein neuer Hype oder können PWA wirklich native Apps ersetzen?

Am Anfang der Smartphone-Ära haben native mobile Apps den Qualitätsstandard gesetzt und Web Apps oder besser gesagt Websites auf die hinteren Plätze verwiesen. Native Apps überzeugten durch eine bessere User Experience (UX) und waren schneller einsatzfähig als Webseiten. Eingepackt in Source Files und mit direktem Zugriff auf die Hardware waren sie einfach leistungsstärker und boten weit mehr Funktionen.

Diesen Fortschritt holten die Web Technologien allmählich ein und entwickelten eine App-ähnlichere Herangehensweise. Technologien wie HTML5 oder CSS3 erschienen auf der Bildfläche genauso wie JavaScript Frameworks. Auch Web Browser haben gründlich nachgerüstet. Dank dieser Fortschritte gibt es jetzt auch Web Apps, die sich mehr wie native Apps benehmen als wie Webseiten.

**Progressive Web Applikationen (PWA)

**

Google hat den Terminus “Progressive Web Apps” erstmals im Jahr 2015 benutzt. Damit hat Google Applikationen beschrieben, die die Vorteile der neuen Funktionen von Webbrowsern nutzten. Dazu gehören Service Workers und Web App Manifeste. Sie ermöglichen es den Usern, Web Applikationen mit Funktionen des nativen OS aufzuwerten. Geht man nach den Google-Entwicklern, dann haben PWA folgende Eigenschaften:

• Progressive: Sie funktionieren für alle User egal, welchen Browser diese nutzen. Denn die App ist so entwickelt, dass sie den Content nach und nach lädt.
• Responsive: Das Seitenlayout ist für alle Arten von Geräten optimiert (Smartphones, Laptops, Netbooks, Tablets, etc.)
• Unabhängig von Empfang: Dank der Service Workers Technologie kann die App auch offline oder bei schlechtem Internet genutzt werden.
• App-ähnlich: Der User hat während der Interaktion und Navigation das Gefühl eine native mobile App zu nutzen.
• Aktuell: Die PWA liefert immer aktuelle Daten, dank der Update Technologie des Service Workers Prozess.
• Sicher: Der Betrieb funktioniert ausschließlich über HTTPS, um Spionage und die Manipulation der geladenen Daten zu verhindern.
• Leicht zu finden: Sie sind - so will es das W3C Manifest - als “Applications” gekennzeichnet. Die Registrierung durch Service Workers ermöglicht den Browsern sie zu finden.
• User Engagement: Sie erleichtern die Nutzerbindung durch Funktionen wie Push Benachrichtigungen.
• Installierbar: User können die App einfach auf ihrem Startbildschirm speichern, ohne den unbequemen und langwierigen Installationsprozess der App Stores in Anspruch nehmen zu müssen.
• Verlinkbar: PWA kann man einfach via URL teilen, ohne komplizierte Installation.

PWA Technologie

PWA sind ein Upgrade bestehender Web Technologien. Sie benötigen weder eine eigene Paketierung noch eine Verteilung. Die PWA wird genauso wie jede andere Website auch online gestellt. Seit 2016 sind PWA in Chrome und der mobilen Safari-Version enthalten.

Manifest

Das Web App Manifest ist ein JSON Manifest für die zentralisierte Definition von Metadaten durch den Entwickler der jeweiligen App. Die W3C Spezifikationen findest du hier.

Ein Beispiel für das manifest.json:

{  
 "short_name": "App name",  
 "name": "The best application ever made! ++",  
 "icons": [  
 {  
 "src": "img/launcher–icon–4x.png",  
 "sizes": "192x192",  
 "type": "image/png"  
 }  
 ],  
 "background_color": "#FAFAFA",  
 "theme_color": "#512DA8",  
 "start_url": "/index.html",  
 "display": "standalone"  
}  
  
// Jetzt muss das Manifest nur noch in den html Head eingefügt werden 

Service Workers

Service Workers stellt programmierbare Netzwerk Proxy im Web Browser zur Verfügugung, um Webanfragen (HTTP) zu bedienen. Service Worker ist zwischen dem Netzwerk und dem Gerät angesiedelt, um den Content zu vervollständigen. Service Workers nutzt einen effizienten Caching Mechanismus und ermöglicht die Nutzung der App, auch wenn sie nicht mit dem Netz verbunden ist.

• Properties of Service Workers
• Einfacher Betrieb von Push Benachrichtigungen
• Datensynchronisierung läuft im Hintergrund
• HTTP Anfragen jedweder Art können verarbeitet werden
• Zentralisierte Aktualisierungen möglich

Service Worker wird als JavaScript Code in den HTML Head eingefügt:

if('serviceWorker' in navigator) {  
 navigator.serviceWorker  
 .register('/service–worker.js')  
 .then(function() { console.log("Service Worker Registered"); });

Das File service-worker.js beinhaltet den Code von Service Worker inklusive des Betriebs der Anfragen. Sollte das Gerät vom W-Lan getrennt werden, während des Betriebs der App, gibt Service Worker immer noch HTTP Code 200 zurück und liefert Offline Content aus dem Cache. Das ermöglicht beispielsweise, dass du diesen Artikel zu Ende lesen kannst. :)

Du kannst die von dir registrierten Service Workers in Chrome durchsuchen unter der URL: chrome://serviceworker–internals

Architektur der Anwendungs-Shell

Anwendungs-Shell ist das minimale HTML, CSS und Java Script, das für das korrekte Laufen des User Interfaces der progressiven App benötigt wird. Das erste Laden von Shell sollte extrem schnell sein und sofort gecached werden. “Gecached” bedeutet, dass die Shell Files einmal über das Netzwerk geladen und später auf einem lokalen Repository gespeichert werden. Jedes weitere Öffnen der App sollte dann vom Cache durch Shell geladen werden - was bedeutet, dass es sehr schnell ist.

Die Architektur der Anwendungs-Shell trennt das Core der Anwendungsinfrastruktur und das User Interface von den Daten. User Interface und Infrastruktur werden durch Benutzen von Service Worker lokal gecached, jedes andere Laden der App lädt nur die benötigten Daten anstelle von allen Daten.

Der Zweck von Anwendungs-Shell ist vergleichbar mit dem Hochladen eines App Packages im App Store, wenn man eine native App entwickelt.

Warum sollte man progressive Web Apps entwickeln?

Das Entwickeln von qualitativ hochwertigen PWA hat viele Vorteile, gefällt den Usern und kann zu mehr Verkäufen, einem größeren User Engagement und höheren Konversionsraten führen.

• Sofern die App die PWA Kriterien erfüllt, zeigt Chrome dem User eine Meldung, wie er die App zum Startbildschirm des Geräts hinzufügen kann.
• Zuverlässige App unabhängig von der Netzqualität.
• Bessere User Experience!
• Durch das Cachen reduziert sich die Menge der heruntergeladenen Daten.
• Steigert User Engagement und Konversionen.
• User haben dank der Installation leichteren Zugriff auf die App.
• Die Erweiterung einer gut geschriebenen JavaScript Web App zu einer vollumfänglichen PWA ist ziemlich einfach: 1 Manifest File und das Einfügen von Service Worker mit ein bisschen Logik für die Offline-Funktionen.

Werden PWA native Apps ersetzen?

Ganz klar: Nein. PWA sind einfach nur ein Upgrade von gängigen Web Anwendungen mit einigen Extra-Funktionen. Die Hauptgründe, warum PWA niemals native Apps ersetzen werden, sind aus meiner Sicht folgende:

• Vor allem Apple wird sich sein App Store Monopol von niemanden streitig machen lassen. Progressive Apps können auf Apple-Geräten installiert werden, aber der Prozess ist ziemlich kompliziert für den User (und wird das nach meiner Meinung auch immer bleiben). Im Safari-Browser muss man auf ein Tab klicken und das ziemlich abstrakte Item “Zum Startbildschirm hinzufügen” auswählen.
• Der Zugang zur Hardware über den Web Browser wird niemals vergleichbar sein mit den Möglichkeiten, die SDK (Software Development Kits) für mobile Apps bieten. Ob das nun FaceID ist, Offline Repository im Smartphone (PWA sind auf 50 MB limitiert) oder auch die API für HomeKit.

Wie prüft man eine Progressive Web App?

Lighthouse ist ein Open Source automatisiertes Tool zum Qualitätscheck deiner Web Anwendung. Man bekommt es als Google Chrome Add-on, aber auch als Node Modul. Gib einfach die URL der jeweiligen Web App ein und das Tool wird eine Reihe von Tests durchführen. Am Ende erhältst du dann eine Auswertung und wahrscheinlich Änderungsvorschläge oder -empfehlungen.

Node Modul eignet sich auch zum Einsatz bei fortlaufenden Integrationstests.

Das Modul lässt sich ganz einfach installieren:

npm install –g lighthouse

Führe einen Test mit der URL der jeweiligen Web Anwendung durch

lighthouse https://example.com/

Fazit

Das Konzept “Progressive Web Apps” ist sehr interessant und machtvoll. Es wird zunehmend zu einer Standarderweiterung von Web Apps werden und schon in deren Entwicklungsphase miteinfließen. Für einige Use Cases sind native Apps schlicht nicht nötig. Man kann sie einfach durch PWA ersetzen. Allerdings sind PWA keine Technologie die auf absehbare Zeit native Apps komplett ablösen werden. Hast du Lust deine erste Progressive Web App zu coden? Sieh die mal das Progressive Beer an oder wie App Entwicklung hier bei Ackee funktioniert.