In der Welt der mobilen Applikationen stehen sich schon seit Jahren zwei Fronten gegenüber. Zum einen kann eine Applikation im Web veröffentlicht werden, und dann über den Browser am mobilen Endgerät benutzt werden, zum anderen lassen sich Applikationen auch nativ für iOS und Android entwickeln, welche dann über den jeweiligen Appstore heruntergeladen werden können. Beide Methoden haben ihre Vor- und Nachteile, was bei größeren Projekten oft dazu führt, dass eine Applikation sowohl für das Web als auch nativ für Android und/oder iOS entwickelt wird. Dies führt natürlich zu einem großen Aufwand an Zeit und folgedessen auch Geld, da drei verschiedene Softwareprojekte umgesetzt werden müssen, um allen Nutzerinnen und Nutzern das gleiche Erlebnis bieten zu können. Für die Lösung dieses Problems wurden auch schon einige Ideen umgesetzt, eine davon, die Progressive Web App, werde ich in diesem Artikel präsentieren.

Der Begriff Progressive Web App wurde erstmals im Jahr 2015 von Google Chrome Entwickler Alex Russel und Designer Frances Berriman geprägt und beschreibt ein modernes Konzept der Entwicklung von Webapplikationen. PWAs sollen einen Mix der besten Aspekte von klassischen responsiven Webseiten und nativen Applikationen darstellen. Russel und Berriman haben weiters einige Grundanforderungen an eine fertige Progressive Web App beschrieben.

Grundanforderungen

• Responsiv: Das Design muss jedem Formfaktor entsprechen.
• Konntektivitätsunabhängigkeit: Durch die Unterstützung von Service Workern auch offline nutzbar.
• App-ähnliche Interaktionen: Sowohl das Design als auch die Nutzbarkeit soll anhand einer App Shell an eine native App erinnern.
• Updated: Durch Service Worker stets am neuesten Stand.
• Sicher: Sicherer Datentransfer als Grundvoraussetzung.
• Auffindbar: Durch Aspekte einer Webseite mithilfe von Suchmaschinen auffindbar.
• Erneute Interaktion: Durch aus Apps bekannten PushBenachrichtigungen wird die User-Interaktion gefördert.
• Installierbar: Kann über den Webbrowser auf dem mobilen Gerät heruntergeladen werden und im Homescreen per Icon erreicht werden.
• Verlinkbar: Durch den Zugang über den Webbrowser leicht per URL zu verlinken.

Installation

• 

• 

• 

Das Installieren einer PWA läuft gleich über den Browser, in dem die PWA aufgerufen wurde und ist sehr simpel gehalten. Die NutzerIn erhält ein Banner, welches sie zum Herunterladen der Applikation veranlasst. Nach einer Bestätigung wird die Applikation auch schon heruntergeladen und kann nun im Homescreen, wie andere native Applikationen über ihr App-Icon geöffnet werden. Dies führt aus technischer Sicht nur dazu, dass die Webseite im Browser geöffnet wird, jedoch kann hier durch gewisse Voreinstellungen und das oben angeführte “App-ähnliche Design” die gleiche User Experience wie bei einer nativen Applikation geschaffen werden.

Entwicklerinnen und Entwickler können ihre bereits bestehenden Webapplikationen auch relativ schnell in PWAs upgraden, da diese neben bekanntem HTML, CSS und Javascript auch nur zwei weitere grundlegende Komponenten benötigen, um PWA-tauglich gemacht werden zu können. Hierbei handelt es sich zum einen um das Manifest der Applikation und zum anderen um den Service Worker, den wohl wichtigsten Bestandteil einer PWA und über welchen die meisten Funktionalitäten, die Nutzerinnen und Nutzer bei nativen Applikationen gewohnt sind, entwickelt werden können.

Manifest

(Dokumentation: https://developer.mozilla.org/de/docs/Web/Manifest)

Beim Web App Manifest der PWA handelt es sich um ein simples Json-File, in welchem verschiedene Daten zur Applikation eingetragen werden. Diese können dann vom Endgerät genutzt werden, um der Applikation im Homescreen einen Namen zu geben oder das passende App-Icon anzuzeigen. Ein Beispiel folgt:

{
	"name": "PWA Tutorial",
	"short_name": "PWA",
	"start_url": "/index.html",
	"display": "standalone",
	"background_color": "#181818",
	"theme_color": "#181818",
	"orientation": "portrait-primary",
	"icons": [
		{
			"src": "/images/icon-48-48.png",
			"type": "image/png",
			"sizes": "48x48"
		},
	]
}

Weitere erforderliche Eigenschaften sind die Farbe der Benachrichtigungsleiste des Endgerätes, die Farbe des Splashscreens, und einer Auswahl aus Anzeigemöglichkeiten wie zum Beispiel dem Vollbildmodus. Optionale Eigenschaften können der Dokumentation entnommen werden.

Service Worker

Service Worker sind Bestandteil der übergreifenden Web Worker API. Diese Web Workers erlauben es Entwickler*innen, bestimmte Skripte unabhängig vom derzeitigen Hauptthread in einem Hintergrundthread laufen zu lassen. Dies
ermöglicht die Ausführung rechenintensiver Operationen, ohne den Hauptthread zu verlangsamen, welcher in vielen Fällen die grafische Oberfläche behandelt. Die Service Worker, welche unter anderem einen der wichtigsten Bestandteile von Progressive Web Applikationen ausmachen, sind programmierbare Skripte, die definieren, wie Serveranfragen gehandhabt werden. So können Anfragen zwischengespeichert werden, um die Performance der Applikation zu verbessern oder gespeicherte Daten auch offline abgerufen werden.

Der grundlegende Lifecycle eines Service Workers besteht aus drei Teilen: Registrierung, Installation und Aktivierung.

Registrierung

Um einen neuen Service Worker zu installieren, muss dieser zuerst im Browser registriert werden.

if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
 .then(function(registration) {
 console.log('Registration successful, scope is:',
registration.scope);
 })
 .catch(function(error) {
 console.log('Service worker registration failed, error:', error);
 });
}

Dieses Beispiel einer Registrierung kontrolliert zunächst anhand der Abfrage nach einem Service Worker im Browsernavigator, ob dieser mit dem Browser kompatibel ist. Ist dies der Fall, kann die „service-worker.js“-Datei mit der Methode „navigator.serviceWorker.register” registriert werden, die ein Promise zurückgibt, welches resolved wird, sobald der Worker erfolgreich registriert wurde und die momentane Scope protokolliert.

Die Scope definiert, welche Dateien in der Applikation vom Service Worker kontrolliert werden können. Liegt die „service-worker.js“-Datei also im root-Ordner, kann der Service Worker in allen darunter liegenden Verzeichnissen verwendet werden.

Installation

Sobald ein Service Worker im Browser registriert wurde, kann eine Installation versucht werden. Dazu wird ein “install”-Event im zu installierenden Worker ausgeführt.

self.addEventListener('install', function(event) {
 // Perform some task
});

Bei der Installation können zum Beispiel gewisse Teile einer Applikation vorgespeichert werden, sodass diese beim nächsten Öffnen sofort geladen werden.

Aktivierung

Ist der Service Worker im Browser installiert, kann er im Anschluss auch sofort aktiviert werden. Es wird, wie bei der Installation, ein „activate“-Event in der Datei des Workers ausgeführt.

self.addEventListener('activate', function(event) {
 // Perform some task
});

Nach der Aktivierung kann der Service Worker auf alle Dateien, die sich in der zuvor definierten Scope befinden, zugreifen. Um die Aktivierung eines potentiell neuen Service Worker vollständig abzuschließen, sollte die Applikation einmal geschlossen und neu geöffnet werden, um alle Inhalte auf den neuesten Stand zu bringen.

Dateien offline anzeigen

Innerhalb des Service Workers können nun auch Requests an den Server angesehen und manipuliert werden. Um eine simple HTML-Datei im Browser anzeigen zu können, muss diese von einem Server geladen werden. Ist eine Nutzerin oder ein Nutzer offline, so kann diese Request natürlich nicht vollständig durchgeführt werden. Mithilfe des Service Workers können nun statische Dateien, wie das benötigte HTML und CSS für die Applikation im Browsercache zwischengespeichert werden. Nun können zuvor gespeicherte Dateien aus dem Cache genommen und angezeigt werden, falls eine fehlende Internetverbindung die Verbindung zum Server verhindert. So kann ein statisches Grundgerüst der Applikation vorgespeichert werden und immer sichtbar sein, auch wenn die NutzerIn einmal offline ist.

Zusammenfassung

Progressive Web Apps sind Webapplikationen, die durch erweiterte Features das Nutzererlebnis einer nativen Applikation simulieren, während sie immer noch die vielen Vorteile von Webapplikationen beibehalten. So bieten sie die Vorteile aus beiden Welten, ohne viel von deren Nachteilen mit sich zu tragen.