Progressive Web Apps

Aber machen wir erstmal einen Schritt zurück:

Das Web macht es möglich, dass irgendjemand irgendwo auf der Welt einen Inhalt veröffentlichen kann und ich noch in derselben Minute darauf zugreifen kann. Dabei spielt es keine Rolle, wo ich bin, welches Gerät ich nutze, welches Betriebssystem ich verwende, es ist sogar egal, welche Bildschirmgrösse ich habe. Es funktioniert einfach. Grossartig, oder?

Mit dem Aufkommen von Smartphones gewannen nun Apps immer mehr an Popularität. Und das völlig zu Recht. Sie boten auf Smartphones langersehnte neue Möglichkeiten der Nutzerinteraktion. Allen voran zum Beispiel Push-Nachrichten oder offline Verfügbarkeit. Der Nachteil: Apps sind immer an ein Betriebssystem gebunden, sie sind teuer in der Entwicklung und bieten viele Hürden in der Verteilung.

Die Lösung: Progressive Web Apps

2015 stellte Google unter dem Namen „progressive web apps“ eine neue Generation von webbasierten Applikationen vor, die folgende Kriterien erfüllen sollten:

• Fast: Die Ladezeit sollte auf ein absolutes Minimum reduziert werden.
• Integrated: Es sollte sich anfühlen, als wäre die Applikation Teil des Geräts.
• Reliable: Verfügbarkeit bei schlechter oder fehlender Internetverbindung.
• Engaging: Der Nutzer kann gezielt zu einer Interaktion animiert werden, auch wenn er die App zur Zeit nicht nutzt.

Um diese Punkte zu erfüllen, muss der Browser natürlich neue, wichtige Funktionen unterstützen.

Das Web App Manifest

Ein Web App Manifest enthält grundlegende Informationen zu der Webseite. Unter anderem zum Beispiel den Titel, eine Beschreibung, verschiedene Icons für den Homescreen und Anzeige-Einstellungen für die App-Ansicht.

Der Service Worker

Der Service Worker (SW) ist ein JavaScript Dokument, welches in einem speziellen Geltungsbereich im Browser installiert wird. Dort kontrolliert er eine Webseite (einen Scope) und führt im Hintergrund Aufgaben aus, dessen Resultate er wiederum an die Webseite oder das Gerät weitergeben kann.

Ein einfaches Beispiel: Der SW überwacht alle Netzwerkanfragen und kann diese gegebenenfalls manipulieren. Sobald der Browser zum Beispiel eine Datei anfragt, entscheidet der SW, ob die Anfrage effektiv an den Server geleitet wird, oder lokal (noch auf dem Gerät) verarbeitet werden soll. Und auch bei der Antwort entscheidet dann der SW, ob diese direkt zum Browser soll, oder ob er zum Beispiel zusätzlich eine Kopie in den Application Storage, also einen lokalen Speicher legen möchte. All das ermöglicht uns nun also, gewisse Funktionalitäten und Inhalte auch offline (aus dem Application Storage) zur Verfügung zu stellen.

Das ist aber noch nicht alles. Der SW wird ganz automatisch registriert, wenn ein Nutzer die Seite besucht. Danach arbeitet er, auch wenn die Webseite oder der Browser längst geschlossen wurde. Indirekt arbeitet die Seite also weiter, auch wenn sie gar nicht aktiv ist.

Möglichkeiten von PWA

Moderne Webseiten und Webapplikationen stehen nativen Apps schon seit langen in kaum etwas nach. JavaScript-Schnittstellen erlauben einen ziemlich umfangreichen Zugriff auf die Gerätefunktionen und moderne Frontend-Frameworks erlauben eine sehr app-ähnliche Nutzerführing.

Progressive Web Apps gleichen nun noch die letzten Nachteile gegenüber mobilen Apps aus:

• Installierbar: PWAs können auf dem Gerät „installiert“ werden, sie können aber gleichwohl über einen URL aufgerufen und geteilt werden. Ein komplizierter Upload-Prozess kann damit einfach umgangen werden.
• Offline Nutzung: PWAs können unabhängig von der Netzwerkverbindung verwendet werden.
• push notifications: PWAs können push notifications empfangen und anzeigen.
• background sync: PWAs können lokal Daten speichern und mit dem Server abgleichen, so bald eine aktive Internetverbindung vorhanden ist.

Browser Support

Wie bereits angetönt setzen PWAs einige Funktionen voraus, die noch nicht flächendeckend unterstützt werden. Während Andriod als Vorreiter in allen Browsern einen umfangreichen PWA Support bietet, tut sich Apples iOS noch etwas schwer. Seit der Version 11.3 macht iOS glücklicherweise immer wieder grosse Schritte hin zu PWAs, allerdings funktionieren sie noch nicht ganz, wie erwartet. Wichtige Funktionen wie  background syncs und push notifications sind leider noch immer nicht möglich und auch der Application Storage ist alles Andere als zuverlässig.

Das tolle an PWAs ist jedoch, dass jedes Feature als sogenanntes „progressive enhancement“ geplant wurde. Wird es unterstützt, kann es genutzt werden, wenn nicht, dann funktioniert alles andere aber trotzdem problemlos.

Progressive Web Apps und WordPress

Das Konzept hinter PWAs hat mich schon von Anfang an fasziniert. Nach meinen ersten Gehversuchen in Verbindung mit Single Page Applikationen, entschieden wir uns unsere eigene WordPress Webseite als Progressive Web App auszugeben¹. Nach vielen sehr positiven Rückmeldungen nahm ich den nächsten Schritt in Angriff. Ein PWA WordPress Plugin, welches unabhängig des Themes PWA Funktionen in eine klassische WordPress Webseite bringt.

Das Web App Manifest kann ganz ohne Programmierkenntnisse erstellt und bearbeitet werden, der Service Worker ermöglicht eine netzwerk­unabhängige Nutzung und es können sogar Push Notifications bequem über den WP Admin Bereich verfasst und an alle registrierten Geräte verschickt werden.

Fazit

Werden PWAs die App-Plattformen ersetzen? Ich denke nicht. Aber das ist auch gar nicht notwendig. Auch mit PWA wird es immer wieder gute Gründe geben, native Apps zu bauen.

PWAs setzen aber dort an, wo native Funktionen grundsätzlich gar nicht notwendig sind. Und das sind mehr, als man denkt: Email Clients, Social Media Profile, Mediaplayer, Messenger, News-Plattformen, etc.. Viele dieser Apps stehen heute noch im Appstore, könnten aber problemlos auch direkt über die Webplattform verteilt werden. In diesem Sinne hoffe ich stark, dass mit PWAs wieder mehr Aufmerksamkeit auf das OpenWeb gelenkt wird.

Fussnoten

1. Die PWA-Funktionen entfielen mit der neuen Website im Jahr 2025. ↩︎