Progressive Web Apps: Wenn Web Apps und Native zueinander finden

Starten Progressive Web Apps nun endlich durch?

Das Buzzword “Progressive Web Apps”, kurz PWA, geistert nun seit einigen Jahren durch die Tech-Blogs, auf den relevanten Konferenzen gibt es Talks zu dem Thema. Auch außerhalb der Entwicklerkreise hörte man immer mehr von PWAs, aber so richtig konnte sich das Hype-Thema leider noch nicht durchsetzen. Möglicherweise lag das daran, dass sich unter anderem Apple einige Jahre Zeit ließ (und auch noch lässt), alle relevanten Techniken im Safari-Browser zu implementieren.

Seit letztem Jahr gibt es hier Bewegung und wir können jetzt viele spannende Technologien auf allen relevanten Plattformen nutzen. Die IT-Analysten von Gartner schätzten schon 2017, dass bis Ende 2020 die Hälfte aller mobilen Apps Progressive Web Apps sein werden.

Die Idee hinter Progressive Web Apps ist, dass sich Web Apps auch weiterhin auf allen Plattformen nutzen lassen und dabei “nativer” werden. Web Apps sollen immer einen grundlegenden Nutzen haben, auch wenn ein Browser veraltet ist und nicht alle neuesten Technologien unterstützt. Unterstützt ein Browser die neuesten Technologien wie Service Worker, Push Notifications oder Background Sync, so können diese Möglichkeiten vom Nutzer auch verwendet werden. Das ist die Idee hinter “Progressive Enhancement“. Ist der Browser des Benutzers moderner, kommen weitere Features wie Installierbarkeit oder Offline-Fähigkeit hinzu. Inzwischen bieten alle relevanten Frameworks wie React, Angular und VueJS eine gute Unterstützung für PWAs an.

---

Nachtrag

Im Frühjahr 2020 hat mein Kollege Sebastian Springer bei der BASTA! über das Thema gesprochen. Checkt das Video hier im YouTube-Channel der Basta!.

---

Ein paar Eckpfeiler

Das hervorragende Google Developer Portal hat für Progressive Web Apps eine umfassende Liste an Punkten definiert:

• Progressive: Eine Web App ist auf jedem System mit Browser lauffähig, bei fehlender Technologieunterstützung möglicherweise mit geringerem Feature-Set.
• Responsive: Eine Web App muss sich auf verschiedensten Geräten mit verschiedenen Bildschirmgröße anzeigen und bedienen lassen, auf dem kleinsten Smartphone wie auf dem 8K-Screen.
• Netzwerkunabhängigkeit: Wenn keine Internetverbindung vorhanden ist, muss eine Web App trotzdem nutzbar bleiben.
• “App-like”: Eine Web App muss sich wie eine native Anwendung anfühlen.
• Aktuell: Eine Web App muss immer auf dem aktuellen Stand sein, da sie sich nicht an die vorgegeben Releasezyklen von App Stores halten muss.
• Sicherheit: Eine Web App ist nur über HTTPS erreichbar. Damit bleibt die Kommunikation verschlüsselt. 
• Durchsuchbarkeit: Es muss möglich sein, die Inhalte einer Web App durch Suchmaschienen indexieren zu lassen.
• “Re-engageable”: Eine Web App kann im Hintergrund weiterlaufen und den Nutzer über Aktualisierungen informieren, so dass man den Nutzer wieder “zurückholt”. 
• Installierbarkeit: Eine Web App muss sich auf dem System des Nutzers wie eine native Anwendung installieren lassen.
• Verlinkbarkeit: Eine PWA ist immer noch eine Web Applikation und somit über eindeutige URLs erreichbar. Die URLs können gespeichert und per Mail oder Chat verteilt werden.

Neben diesen technischen Themen, die Web-Entwickler ausprobieren und möglichst schnell in ihren Projekten ausrollen können, gibt es weitere Vorteile, die für die Konzeption bestehender und neuer Web Apps als Progressive Web App sprechen.

“App-Like” auf allen Plattformen

Bereits heute können PWAs auf vielen Plattformen als “quasi native App” installiert und betrieben werden, sei es auf mobilen Plattformen wie Android oder iOS wie auch Desktop-Systemen. Für viele Unternehmen sind letztere natürlich besonders relevant, da immer noch ein Großteil der Angestellten an Windows-Rechnern sitzt. Seit kurzem lassen sich PWAs auf Windows 7, 8 und 10 über Chrome und den neuen Chromium-basierten Edge-Browser installieren und so quasi nativ nutzen. Selbiges gilt auch für die Kombination von Chrome mit macOS und Linux. Wer das gerne schnell auf seinem Laptop oder Desktop-PC ausprobieren will: Chrome starten und auf mobile Seite von Twitter aufrufen, dann über das “Drei-Punkte-Menü” und “Twitter installieren” die Progressive Web App installieren und dann schon hat man die Twitter Web App lokal auf seinem Rechner, analog zu einer nativen App. Ab Chrome 76 wird es noch einfacher, dann erscheint bei installierbaren Web Apps direkt in der Adresszeile des Browsers ein Plus-Button zum Installieren.

Kooperatives Arbeiten

Das Thema Kooperation wird in der modernen Arbeitswelt immer wichtiger. Manche sprechen schon von “Kooperation 4.0“, da der Austausch von Informationen einen immer größeren Bestandteil der täglichen Arbeit widerspiegelt, gerade in verteilten Teams. Ein wichtiger Punkt ist hier die einfache Möglichkeit des Verteilens von Informationen, dem “Sharing”. Über die Web Share API ist es bereits heute möglich, auf Android und iOS die native Share-Komponenten der Betriebssysteme zu nutzen und zum Beispiel ein Bild von einer Web App über verschiedenste Kanäle weiter zu verteilen.

Schnelligkeit durch Offline-Fähigkeit

Verglichen mit “normalen” responsiven oder mobilen Web Apps laden Progressive Web Apps um ein Vielfaches schneller. Grund hierfür sind die Service Worker, welche die Requests im Offline-Fall managen, sich aber auch um das Vorladen und Cachen aller Ressourcen, etwa Bilder, Fonts und statischem Code kümmern. Und sie synchronisieren die relevanten Daten einer App mit dem Server, was zu einem sehr geringen Netzwerkverkehr führt. Hier trumpfen PWAs natürlich auf, da sie auch bei schlechten Netzwerkverbindungen gecachte Inhalte darstellen oder Benutzerdaten zunächst lokal vorhalten und sie später, bei besserer Netzanbindung, synchronisieren. Wird die Web App beispielsweise durch ein neues Deployment auf dem Server aktualisiert, kümmert sich der Service Worker im Hintergrund auch um das Aktualisieren der App, sobald dies abgeschlossen ist, wird der Benutzer aufgefordert, einmalig die Web App durch einen Reload zu aktualisieren.

Durchsuchbarkeit / Indexierbarkeit

Das schnelle Auffinden von Informationen ist auch heute eines der wichtigsten Features einer Web App, sei es in der App selbst oder natürlich auf Suchmaschinen wie Google, Bing oder DuckDuckGo. Eine wesentliche Eigenschaft von Progressive Web Apps und auch ein großer Vorteil gegenüber nativen Apps ist die Durchsuchbarkeit für Crawler von Suchmaschinen. So ist es möglich, dass die öffentlichen Inhalte der Web App auch für andere User auffindbar sind.

Zusammenfassung und Ausblick

Viele Technologien rund um das Thema Progressive Web Apps sind die letzten Jahre immer erwachsener und benutzbarer geworden. Seit Ende 2018 (und dem Nachziehen für Apples Safari-Browser) können die grundlegenden PWA-Features in allen aktuellen Mainstream-Browsern verwendet werden. Somit können bestehende und auch neue Web-Apps-Features aus dem PWA-Baukasten je nach Anforderung “bestückt” werden.

In Zukunft werden viele weitere spannende Themen hinzukommen, zum Beispiel eine Hintergrundsynchronisierung von Daten oder bessere Hinweise für Nutzer. Und das ist ja auch der Sinn von “Progressive Enhancement”: Wenn neue Technologien nutzbar sind und einen Mehrwert bringen, können diese iterativ um- und eingesetzt werden.

---

Über den Autor