Der Progressive Web Apps (PWA) Guide

1. Was macht eine Web App zur PWA?

Zunächst ist eine PWA, wie der Name schon sagt, mal nichts weiter als eine Web App, also eine Applikation, die im Browser läuft. Progressiv ist sie deswegen, weil ihr Funktionsumfang in dem Maße steigt, wie es das Endgerät zulässt bzw. über welche Funktionalitäten das Endgerät selbst verfügt.

Eine PWA ist aber mehr als eine mobil optimierte Website, denn sie kann einiges mehr:

1.1. Eine PWA ist installierbar

Das ist vielleicht der grundlegendste Unterschied, der bisher zwischen einer echten (nativen) App und einer Web App bestanden hat: die eine wird heruntergeladen, installiert und ist danach dauerhaft und ohne Internetverbindung auf dem Endgerät verfügbar. Die Web App konnte zwar auch bereits durch den lokalen Browserspeicher offline verfügbar gemacht werden, aber die Lösung hatte viele Haken und war alles in allem unzuverlässig über alle Browser hinweg zu nutzen.

Die PWA ist nun der wahr gewordene Traum der Web Entwickler: eine echte App mit echter Installation zum sicheren und dauerhaften Verbleib auf dem Endgerät. Ganz so zauberhaft wie es klingt ist es aus Entwicklersicht allerdings nicht, denn um diese Funktionalität umzusetzen benötigen wir (für die echte PWA) Service Workers. Diese munteren kleinen Gesellen erlauben zwar eine extrem genaue Kontrolle über das Caching von Ressourcen, benötigen dafür aber auch eine Menge Anweisungen, sprich viel Copy&Paste Code. Man schießt hier also - mangels verfügbarer Kleinkaliber - mit großen Kanonen auf kleine Spatzen (siehe "Service Workers replacing AppCache").

Letztlich wird die PWA aber durch die bedingungslose Offline-Speicherung eine vollwertige App, die diesen Namen auch verdient.

1.2. Die PWA ist mehr als responsive

Von einer Web App darf man selbstredend erwarten, dass sie responsive ist, also auf das Format des Endgeräts reagiert und sich flüssig den diversen Größen anpasst. Die PWA reagiert aber nicht nur auf die Größe des Endgeräts, sondern auch auf eine Reihe weitere Eigenschaften. So kann die PWA etwa Push Nachrichten an den User verschicken, sofern dieser das möchte und der Browser dazu in der Lage ist.

1.3. Eine PWA ist schnell und sicher

Schließlich ist für die Verwendung von Service Workern, die die Funktionalitäten der PWA überhaupt erst ermöglichen, zwingen eine Verschlüsselung per HTTPS vorgeschrieben - eine gewisse Sicherheit zumindest bei der Übertragung ist damit gewährleistet. Die Schnelligkeit ergibt sich zwangsläufig aus dem differenzierten Caching der benötigen Daten.

Die progressive Web App vereint die Vorzüge aus beiden Welten: sie kann ohne Umwege über einen App Store direkt auf einer Website aufgestöbert und sofort genutzt werden, aber dann auch auf Wunsch des Users wie eine native App heruntergeladen und über ein eigenes App Icon außerhalb des Browsers gestartet werden.

2. Der Einstieg in PWAs

Da die meisten Web Anwendungen auch ohne Service Workes funktionieren und sich diese schon wie viel Arbeit anhören, scheuen viele Entwickler den Sprung zur progressiven Variante der Web App. Dabei gibt es mittlerweile einige Ressourcen, die den Umgang mit PWAs erleichtern:

2.1 Frameworks für PWAs

Moderne Frameworks bieten bereits einige Funktionalitäten, die wir für PWAs benötigen, fertig aus der Schublade. Hier nur die beliebtesten zwei:

• AngualarJS: Googles hervorragendes und weit verbreitetes Front-End JavaScript Framework bieten neben allen bekannten Stärken auch eine einfache Umsetzung der SW
• Ionic 2: Das Framework basiert auf AngualarJS, ist aber darauf ausgelegt, aus der entstandenen App auch eine native App zu generieren. Ionic 2 ist aktuell von den vielen verfügabaren Hybrid-App Technologien die am schnellsten wachsende.

2.2 Service Workers auf Rezept

Wie wir bereits wissen, dreht sich bei einer PWA vieles um die Service Workers. Das "Service Workers Cookbook von Mozilla bietet eine Reihe von Skripten, mit denen alle denkbaren Aufgabenstellungen rund um die unsichtbare Hintergrundarbeit der Service Workers erschlagen werden können. Vom der einfachen"Network or Cache" Weiche bis hin zum komplexen Push Subscription findet man alles, was die PWA braucht.

2.3 Testen der PWA

Nach dem Entwicklen ist vor dem Entwickeln findet man regeläßig wenn die PWA fertig ist und es ans Testen geht. Das zentrale Thema hierbei ist herauszufinden, ob der Offline-Cache richtig funktioniert und die PWA auch fehlerfrei angezeigt wird, wenn kein Netz verfügbar ist. Dazu bieten alle Browser heutzutage in den Entwicklertools (generell per F12 zu öffnen) einen Reiter "Network". In diesem kann eingestellt werden, ob die App z.B. offline oder mit einem 3G Netzwerk simuliert werden soll.

Entwickler-Tools in Chrome: Offlinefähigkeit der PWA testen

PWA Testing mit Lighthouse

Das Browser Plugin Lighthouse(bei Chrome serienmäßig in den Entwickler-Tools, sonst auch als Node Modul und per CLI) verspricht hier Abhilfe. Ein Klick und schon klappert das Tools deine PWA auf alle relevanten Fragestellungen hin ab - von der Performance über generelle PWA Optimierung (meint Caching) bis hin zur SEO erfährst du alles darüber, wie deine PWA aufgtestellt ist.

3. PWA beauftragen

3.1 Reicht eine responsive Web App oder muss es eine PWA sein?

Eine PWA fordert dem Entwickler einige zusätzliche Arbeitsschritte und Testprozeduren ab, die einen höheren Preis der Anwendung mit sich bringen.Als Auftraggeber müssen Sie daher abwägen, ob Sie bereit sind, die zusätzlichen Funktionalitäten zu bezahlen. Wie im technischenAbschnitt geschildert, führt kein Weg an einer PWA (oder noch deutlich teureren nativen Apps) vorbei, wenn eine der folgenden Anforderungenan Ihre Applikation besteht:

• Offline-Fähigkeit: die App muss auch ohne Internetverbindung erreichbar sein und wenigstens die zuletzt abgerufenen Daten anzeigen
• Sie dem User Push-Nachrichten schicken möchten
• Größere Mengen Daten (mehr als 5MB) offline gespeichert werden sollen

Alle anderen Anforderungen lassen sich auch mit den klassischen Mitteln des Browser-Caches und ggf. LocalStorage lösen. Diese sind teils Standardfunktionalität des Browsers und damit erheblich einfacher umzusetzen.

3.2 Entwickler für eine PWA finden

PWA WebApp
Entwickler

Das App Entwickler Verzeichnis ist natürlich die naheligende Quelle, um Entwickler zu finden, die mit allen (Achtung Wortwitz) App-Wassern gewaschen sind. Einfach auf "Programmierer finden" klicken und dort "WebApp Entwickler" wählen und schon erscheinen hunderte fähiger Entwicklerfür PWAs.

Weitere Artikel zum Thema PWA

"Add to Homescreen" für Progressive Web App (PWA)