Progressive Web Apps sind die Zukunft mobiler App-Nutzung

Es führt kein Weg daran vorbei, die Nutzung des Webs verlagert sich immer mehr auf mobile Geräte. Um mobile Nutzer optimal zu erreichen, genügt die Optimierung von Webseiten auf mobile Geräte schon lange nicht mehr. Das Produkt muss zusätzlich als native App auf dem Startbildschirm des Nutzers präsent sein und Zusatzfunktionen anbieten.

Lange Zeit konnten mobile Web Apps im Vergleich zu nativen Apps sowohl funktional als auch vom Look-and-Feel nicht mithalten. So spielte sich die native App dank Push-Nachrichten, Offline-Fähigkeit und der Positionierung auf dem Startbildschirm immer mehr in den Vordergrund.

Mit Progressive Web Apps kann sich das jetzt ändern: Die Technologie ermöglicht es Entwicklern, mobile Web Apps mit dem Look-and-Feel und den Funktionen zu bauen, die bisher nativen Apps vorbehalten waren. Die Progressive Web App kann damit sowohl die Desktop- und mobile Webseite als auch die native App ersetzen und dabei viel Entwicklungsaufwand sparen.

Funktionen in der Übersicht

Bei mobilen Web Apps handelt es sich lediglich um responsive Webseiten, die sich an die Bildschirmgröße des Mobilgeräts und die Bedienung mit Finger-Touch anpassen. Die Pro-gressive Web App hingegen geht wesentlich weiter. Sie lässt sich nicht nur über den Browser als klassische mobile Web App öffnen, sondern kann direkt auf dem Mobilgerät installiert und im Vollbildmodus genutzt werden.

Progressive Web Apps sind auf schnelle Ladezeiten ausgelegt, können Push-Nachrichten – wie beispielsweise bei WhatsApp – empfangen und sogar Offline-Funktionen bereitstellen. Für den Nutzer sind sie so kaum von einer nativen App unterscheidbar.

Wie funktioniert die Progressive Web App genau?

Eine Progressive Web App besteht aus einer mobilen Webseite, in die ein sogenannter Service Worker und ein App Manifest eingebunden werden. Beim Service Worker handelt es sich um einen programmierbaren Hintergrundprozess, der im Browser läuft. Er kann alle Anfragen einer Webseite abfangen und diese zum Beispiel aus einem eigenen Cache bedienen. Außerdem lassen sich hier Push-Nachrichten von einem Server empfangen und zudem lässt sich feststellen, ob das Gerät offline ist und etwa beim nächsten Verbindungsaufbau eine Synchronisation ausgelöst werden sollte.

Das App Manifest ist eine Datei, in der Daten zur Darstellung der App angegeben werden. So können hier der Name und das Icon der App, aber auch Einstellungen wie Vollbildmodus und andere visuelle Eigenschaften konfiguriert werden.

Jede mobile Webseite mit einem Service Worker und einem App Manifest wird als Progressive Web App erkannt. Welche Funktionen tatsächlich im Service Worker implementiert werden (Caching, Offlinemodus, Push-Nachrichten usw.), steht dem Entwickler frei.

Für die Installation der Progressive Web App auf dem Smartphone wird die mobile Webseite im Browser geöffnet. Nach wenigen Sekunden auf der Webseite wird dem Nutzer mittels eines Banners die Installation vorgeschlagen. Nach der Installation kann die App direkt vom Startbildschirm zugegriffen werden.

Schnelles Laden

Über den Service Worker gelingt es, den statischen Teil der Progressive Web App direkt aus dem Cache auszuliefern und gegebenenfalls im Hintergrund beim Server anzufragen, ob sich diese Daten verändert haben. Insbesondere dynamische Daten wie Artikel in einem News-Stream oder Produkte in einem Onlineshop werden weiterhin vom Server geladen. Wichtige Voraussetzung: Der Entwickler muss definieren, welche Daten für wie lange im Cache liegen dürfen.

Offlinemodus

Wenn das Gerät keine Verbindung zum Internet hat, kann dies im Service Worker erkannt und die Webseite aus dem Cache heraus geladen werden. Idealerweise sollte dem Nutzer angezeigt werden, dass die App im Offlinemodus arbeitet, weil Daten veraltet und einige Funktionen nicht verfügbar sein können, zum Beispiel das Hinzufügen eines Artikels in den Warenkorb.

Bezüglich der Funktionalitäten im Offlinemodus hat der Entwickler viel Spielraum bei der Implementierung. Er kann sich beispielsweise darauf beschränken, Daten aus dem Cache anzuzeigen und alle Nutzerinteraktionen im Offlinemodus zu deaktivieren. Optional können auch einzelne Funktionen wie das zuvor erwähnte Hinzufügen eines Artikels in den Warenkorb im Offlinemodus implementiert werden. Dafür müssen die im Offlinemodus veränderten Daten mit dem Zustand des Servers synchronisiert werden, sobald wieder eine Verbin-dung zum Internet besteht.

Push-Nachrichten

Klassische Webseiten sind nicht in der Lage, Nachrichten zu empfangen, wenn der Nutzer sie nicht gerade aktiv benutzt. Mit dem Service Worker bekommt der Entwickler die Möglich-keit, Push-Nachrichten von einem Server zu empfangen, auch wenn die App nicht genutzt wird oder sogar wenn das Mobilgerät gesperrt ist. Für den Nutzer gibt es dabei keinen Unterschied zu den herstellerspezifischen Push-Nachrichten von nativen Apps wie WhatsApp.

Entwicklungsaufwand

Das Herzstück einer Progressive Web App ist der Service Worker. Je mehr Zeit der Entwickler hier investiert, desto besser wird das Nutzererlebnis. Für die verschiedenen Funktionen sind unterschiedliche Dinge zu beachten.

Für das Caching im Service Worker muss wieder konkret definiert werden, welche Ressour-cen wie gecached werden sollen. Diese Entscheidungen und Konfigurationen sind in vielen Fällen sehr komplex. Best Patrices wie Asset Hashing und andere Web Performance-Techniken können hier helfen.

Für den Offlinemodus muss im Service Worker definiert werden, welche Ressourcen ausgeliefert werden sollen und welche Nutzeraktionen im Offlinebetrieb möglich sind. Wenn der Nutzer im Offlinemodus Daten verändern kann, müssen zudem ein Synchronisations-Mechanismus entwickelt und serverseitig eine Konfliktauflösung implementiert werden.

Für Push-Nachrichten muss serverseitig das entsprechende Protokoll umgesetzt werden. Der Pflegeaufwand bei Änderungen an der Webseite kann dadurch relativ hoch sein. Caching, Offlinemodus und die Synchronisation müssen dabei stets im Blick bleiben.

Viele Aspekte eines Service Workers lassen sich allerdings anwendungsunabhängig lösen. Es eröffnet sich die Möglichkeit auf externe Service Worker zurückgreifen. Der Cloud Service von Baqend liefert beispielsweise einen vorkonfigurierten, cachenden Service Worker, der direkt auf Webseiten eingebunden werden kann.

Dort optimiert er automatisch die Geschwindigkeit durch Caching und ermöglicht einen Offline-Modus mit Synchronisation und Push-Nachrichten. Ein weiterer Vorteil: Der Service Worker beschleunigt nicht nur die mobile Seite, sondern unabhängig von Progressive Web Apps auch automatisch die Desktop-Webseite. Sogar vom Offlinemodus kann die Desktop-Variante profitieren.

Einschränkungen

Einige Einschränkungen sind jedoch zu berücksichtigen: Derzeit unterstützen rund 70 Prozent der Browser den Service Worker (u.a. Google Chrome, Firefox, Microsoft Edge und Opera). Die Implementierung in Safari (Apple) ist geplant. Entsprechend werden Progressive Web Apps bisher nur unter Android unterstützt.

Trotzdem ist festzustellen, dass Progressive Web Apps nicht den Anspruch haben, alle nativen Apps zu ersetzen. Diese haben nach wie vor ihre Berechtigung und bleiben in einigen Punkten weiter überlegen. Beispielsweise werden aufwendige 3D-Spiele immer besser direkt auf dem Betriebssystem laufen als in einem Browser.

Fazit

Progressive Web Apps stellen eine großartige Möglichkeit dar, sehr schnelle und ansprechende App-ähnliche Webseiten zu entwickeln. Die tatsächliche Performance und App-ähnliche Benutzbarkeit hängen allerdings sehr stark von der Qualität des zu entwickelnden Service Workers ab.

Beim Rückgriff auf bestehende, externe Service Worker können die aufwendige Entwicklung eigener Lösungen und die damit einhergehende hohe Fehleranfälligkeit umgangen werden. Zudem können Service Worker, die in die Website selbst eingebunden sind, nicht nur Progressive Web Apps beschleunigen, auch die Desktop-Website profitiert vom Service Worker.