Progressive Web Apps (PWA): Websites werden zu Apps

Ein Gastbeitrag von Nico Martin, Gründer der Agentur Say Hello

Hinter Progressive Web Apps (PWA) verbirgt sich eine neue Technologie, die es Websites erlaubt, Features zu nutzen, die man bis anhin nur von Mobile-Apps kennt.

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 das Google-Chrome-Team 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 Website. Unter anderem zum Beispiel den Titel, eine Beschreibung, verschiedene Icons für den Homescreen und Anzeigeeinstellungen 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 Website (einen Scope) und führt im Hintergrund Aufgaben aus, dessen Resultate er wiederum an die Website 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 Website besucht. Danach arbeitet er, auch wenn die Website oder der Browser längst geschlossen wurde. Indirekt arbeitet die Website also weiter, auch wenn sie gar nicht aktiv ist.

Möglichkeiten von PWA

Moderne Websites und Webapplikationen stehen nativen Apps schon seit langem 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ührung.

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, sobald 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 Android 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 dazu, unsere eigene WordPress-Website 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-Website bringt.

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

Damit ist es zu diesem Zeitpunkt das umfangreichste PWA-Plugin im offiziellen WordPress-Plugin-Verzeichnis!

https://wordpress.org/plugins/progressive-wp/

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: E-Mail-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 Open-Web gelenkt wird.