Mit Web-Technologie zu universeller App-Kompatibilität, Teil 1 Die Progressive Web App als Heilsbringer?

Wer ein konsistentes App-Erlebnis auf allen Endgeräten bereitstellen möchte, will sich wohl kaum in einem proprietären Ökosystem eines Plattform-Anbieters einfangen lassen. Mit progressive Webapps oder kurz PWAs können Entwickler und Entwicklerinnen „die Flucht nach vorne ergreifen“.

Die Unterstützung von PWAs durch Google, Microsoft & Co. hat Web-Developern neue Möglichkeiten eröffnet, universelle mobile Apps zu erstellen, ohne sich mit den Komplexitäten nativer, Plattform- oder Framework-spezifischer Sprachen auseinandersetzen zu müssen. Bei den sogenannten PWAs (kurz für progressive Web-Apps) handelt es sich um eine ganz besondere Art von mobilen Anwendungen.

Progressive Web-Apps ermöglichen mit einer einzigen Codebasis, ein nahtloses Benutzererlebnis auf mehreren mobilen Plattformen und auf Geräten mit jedem beliebigen Formfaktor – von Smartphones über Tablets bis hin zu Laptops und Desktops – zu schaffen. Hierzu machen sie sich moderne Webtechnologien und Design-Prinzipien zu Nutze.

Im Gegensatz zu nativen mobilen Apps können PWAs mit einer einzigen Codebasis mehrere Plattformen abdecken. Dies reduziert den Entwicklungs- und den Wartungsaufwand erheblich. Denn native Apps erfordern eine separate Codebasis in einer nativen Sprache jeder avisierten Zielplattform: wahlweise Kotlin oder Java auf Android und wahlweise Swift oder Objective C für iOS. Dies setzt nicht zuletzt unterschiedliche Werkzeuge voraus.

PWAs lassen sich in einem Webbrowser wie eine herkömmliche Website aufrufen – und doch installieren sie sich wie eine mobile App. Sie erscheinen dann an all den gewohnten Stellen des Betriebssystems und funktionieren ähnlich wie native mobile Apps. Sie können mit Push-Benachrichtigungen auftrumpfen und auf (viele, jedoch nicht alle) native Gerätefunktionen wie Kameras oder GPS zugreifen. Dank lokalem Caching sind sie auch dann nutzbar, wenn die Netzwerk-Konnektivität schwankt.

Vorteile von PWAs

PWAs bieten gegenüber nativen Apps und auch im Vergleich zu konventionellen Webseiten – sowohl den Usern als auch den Entwicklerinnen und Entwicklern – entscheidende Vorteile. Dazu zählen:

• schnellere Ladezeiten im Vergleich zu Webseiten (u.a. dank intelligenterem, Cache-Management)

• höhere Reichweite als native Apps dank der geräte- und weitgehend plattformübergreifenden Kompatibilität der Codebasis

• geringerer Speicherbedarf im Vergleich zu nativen Apps

• höhere Reichweite als native Apps dank der Möglichkeit, die PWA auch direkt aus dem Browser zu beziehen (statt ausschließlich über den App-Marktplatz)

• bessere Auffindbarkeit im Web im Vergleich zu konventionellen Webseiten dank der Vorzugsbehandlung durch Google & Co. (Stichwort: Mobile-first-Indizierung);

• bessere Benutzererfahrung als gewöhnliche Webseiten dank der App-typischen Integration ins Betriebssystem

• höhere Konversionen als Webseiten dank erhöhter Nutzerbindung und -zufriedenheit

• einfachere Wartung dank einer einheitlichen Codebasis und der Vermeidung von plattformspezifischem Code

PWAs werden auf den Servern des App-Anbieters gehostet und lokal auf dem Endgerät gecacht. Die Wartung und Pflege erfolgen auf dem Server und damit bleibt sie für den Endanwender unsichtbar. PWAs belästigen ihre User auch nicht mit Update-Aufforderungen. Sie aktualisieren sich serverseitig, was keine Zustimmung der Nutzer erfordert.

Zur Bereitstellung einer PWA im Web braucht das Entwicklerteam keine lästigen Genehmigungsverfahren der App-Marktplätze über sich ergehen zu lassen, wie es bei nativen Anwendungen der Fall ist. Das klingt alles sehr gut. Fast schon zu gut, um wahr zu sein. Wo ist also der Haken?

PWAs unterliegen einigen Einschränkungen

Googles Browser-Engine Chromium bietet ausgereiften Support für PWAs; diese kommt unter anderem auch Microsofts Edge und Opera zugute. Auch Mozilla Firefox (die Gecko-Engine) und Samsung können mit umfassender Unterstützung für diese Apps auftrumpfen.

Auf Apples mobilem Betriebssystem iOS laufen PWAs in der WebKit-Engine von Safari, unabhängig von dem bevorzugten Browser des Nutzers, da Apple Entwicklern nicht erlaubt, andere Rendering-Engines unter iOS zu verwenden. In WebKit ist die Unterstützung leicht eingeschränkt. PWAs auf iOS können zum Beispiel keine Benachrichtigungen senden, wenn die App nicht geöffnet ist, und haben wesentlich weniger Offline-Speicher zur Verfügung (nicht mehr als 50MB, das genaue Limit variiert von Fall zu Fall).

Darüber hinaus darf der Browser den Cache selbst löschen, insbesondere wenn der Platz knapp wird. Im Gegensatz zu einigen anderen Plattformen bietet iOS keinen Mechanismus, um den Browser anzuweisen, bestimmte Daten dauerhaft zu speichern. Probleme und Inkonsistenzen bei der Verwendung von IndexedDB in PWAs auf iOS machen es nicht einfacher.

Viele App-Features auf iOS sind in PWAs tabu, darunter: Zugriff auf Face ID und Touch ID, Bluetooth, Siri, Kontakte und Integrationen mit „sozialen“ Diensten (Facebook & Co.). Nichtsdestotrotz können PWAs auch auf iOS auf einige native Features wie Geolocation (Standortbestimmung), Sprachsteuerung, Kameras, Audiowiedergabe und Apple Pay zurückgreifen.

Eine der größten Einschränkungen unter iOS ist die fehlende Unterstützung für Push-Benachrichtigungen – eine Funktion, die auf Android-Geräten verfügbar ist. PWAs auf iOS haben zudem eingeschränkten Zugriff auf einige native Gerätefunktionen im Vergleich zu nativen Apps und diese Funktionalität ändert Apple immer wieder. Darüber hinaus können PWAs, die auf iOS im Hintergrund aktiv sind, nach einer gewissen Zeit beendet werden. Das kann die Synchronisierung und Datenverarbeitung im Hintergrund beeinträchtigen.

Funktionsweise einer PWA

PWAs bieten eine app-ähnliche Nutzererfahrung und erlauben es gleichzeitig, die aufwändige Installation einer Marktplatz-Anwendung und nachfolgender Updates zu überspringen. Beim Aufruf einer Website mit einer PWA-Funktion gibt der Webbrowser Usern – zum Beispiel anhand einer Schaltfläche im URL-Feld – zu erkennen, dass sich eine progressive Web-App (PWA) für die Installation anbietet (sofern die Kriterien dafür erfüllt sind).

Betritt ein Benutzer eine Website mit einer PWA-Funktion, speichert der Browser die gesamte App erst einmal im Cache. So kann beim erneuten Betreten der Website die gesamte Information aus dem Cache aufgerufen werden. Sobald das Gerät nach einer Unterbrechung der Konnektivität wieder online geht und auf dem Server eine neue Version vorfindet, gleicht sich die PWA mit dem Webserver ab. Sie überträgt ggf. Offline-Daten aus dem lokalen Speicher und holt vom Server Aktualisierungen ab.

Installierte PWAs erscheinen an den üblichen Stellen des Betriebssystems, also etwa auf dem Startbildschirm von Android und iOS (Letzteres nach manueller Einrichtung), im Startmenü und in der Taskleiste auf Windows, im Aktivitätenumschalter sowie ggf. im Dateisystem (z.B. im Anwendungsordner von macOS), in Inhaltsfreigabedialogen und in der Suche auf dem mobilen Endgerät (zum Beispiel in Spotlight). iOS-Benutzer müssen zur Installation der App auf dem Home-Bildschirm das Teilen-Symbol in Safari verwenden (mit der Option „Zum Home-Bildschirm hinzufügen“).

Zu den wichtigsten Merkmalen von PWAs gehören:

• Progressive Anreicherung: PWAs stellen in allen aktuellen Browsern eine Grundfunktionalität bereit; gleichzeitig können sie auf leistungsfähigeren Endgeräten mit fortgeschrittenen Features auftrumpfen.

• Universelle Display-Kompatibilität: Dank responsivem Design können sich PWAs an verschiedene Bildschirmgrößen und -ausrichtungen anpassen.

• Offline-Fähigkeiten: PWAs haben einen Offline-Modus; sie können Inhalte und Ressourcen zwischenspeichern, ihre Funktionalität auch ohne aktive Internet-Verbindung funktionsfähig zu bleiben.

• App-ähnliche Nutzererfahrung: PWAs fühlen sich an wie native mobile Apps; sie verwenden app-ähnliche Navigation, Gesten und Übergänge, um ein reibungsloses und immersives Benutzererlebnis zu schaffen und lassen sich wie gewöhnliche Apps installieren.

• Serverseitige Updates: PWAs holen Aktualisierungen vom Server im Hintergrund ein.

• Kompromisslose Sicherheit: Die Bereitstellung von PWAs erfolgt über HTTPS.

• Auffindbarkeit und Teilbarkeit: Jede PWA hat eine eindeutige URL wie eine gewöhnliche Webseite; dadurch lassen sich PWAs leicht über Suchmaschinen auffinden und per URLs mit anderen teilen.

• Mehr Interaktion dank Push-Benachrichtigungen: Eine PWA kann Benutzern Push-Benachrichtigungen senden, auch wenn sie nicht im Vordergrund läuft.

• Geringere Entwicklungskosten: Da sich PWAs Webtechnologien und -Standards zu Nutze machen, lassen sie sich mit einer universellen Codebasis für beliebige webfähige Plattformen verpacken und dort bereitstellen, was die Kosten der Entwicklung und laufenden Wartung im Zaum hält.

Um zu verstehen, wie sich eine Progressive Web App von herkömmlichen responsiven Websites unterscheidet, hilft es, einige gelungene PWAs auf die Probefahrt zu nehmen. BMW, Pinterest, Spotify, Starbucks und Uber sind nur einige der unzähligen Beispiele von erfolgreichen PWAs. Eine besonders interessante Fallstudie ist die ZDF Mediathek.

Fallstudie ZDF: eine Mediathek für den Offline-Filmgenuss

Als sich der öffentlich-rechtliche Sender ZDF der Herausforderung stellte, die Front-end-Technologieplattform neu zu gestalten, wollte man die Präsenz gleich von Grund auf neu erfinden. Die Entwicklungsagentur FFW Deutschland GmbH (zuvor unter dem Namen Cellular GmbH bekannt) übernahm die Aufgabe, ein webbasiertes Erlebnis zu schaffen, das mit ZDFs plattformspezifischen iOS- und Android-Apps mithalten sollte.

Das Resultat ist die PWA „ZDF Mediathek“ mit der Fähigkeit zur Offline-Videowiedergabe im augenschonenden Dunkelmodus. Das Entwicklungsteam hat sich entschieden, die PWA in TypeScript und React zu implementieren.

Eine der zentralen Features einer PWA ist die Offline-Bereitstellung von Inhalten. Den Großteil dieser Funktionalität im Hinblick auf das Zwischenspeichern statischer Assets konnte das Entwicklungsteam mit Workbox umsetzen, einer Sammlung von Bibliotheken und Node-Modulen für fortgeschrittenes Caching.

Die Verwendung von Workbox lag nahe, denn es ist bereits in das Befehlszeilenwerkzeug create-react-app integriert, das Facebook entwickelt hatte, um die Erstellung von React-Anwendungen zu erleichtern. Das CLI-Tool von Facebook automatisiert viele der Schritte, die normalerweise bei der Einrichtung einer React-Anwendung anfallen, wie das Einrichten von Webpack, Babel und anderen Build-Werkzeugen. So konnte sich das Entwicklungsteam auf die eigentliche Aufgabe konzentrieren, nämlich die Offline-Bereitstellung dynamischer Inhalte, konkret: der Videos und ihrer Metadaten.

Die Grundidee schien simpel: Wann immer eine Nutzerin oder ein Nutzer ein Video abruft, speichert es die PWA als „Blob“ in der lokalen Datenbank „IndexedDB“ für den Offline-Zugriff ab. Während der Wiedergabe lauscht die App auf Online-/Offline-Ereignisse und greift auf die lokale Version zurück, wann immer das Netzwerk ausfällt. In der Praxis war die Umsetzung dann deutlich komplizierter als gedacht.

Eine der Projektanforderungen war die Verwendung des offiziellen ZDF-Webplayers. Das ergibt auch Sinn: Der Player nimmt eine Content-ID entgegen, plaudert kurz mal eben mit der ZDF-API und schon kann er das zugehörige Video abspielen. Einziges Problem: Er kann nicht mit Offline-Unterstützung aufwarten. Das Entwicklungsteam musste diese Funktionalität über Service-Worker nachrüsten.

Der Service Worker kann die verschiedenen Anfragen abfangen, die der Player sendet, und mit den Daten aus der IndexedDB antworten. Dies verleiht der App automatisch die so begehrten Offline-Fähigkeiten, ohne dass eine einzige Zeile des Player-Codes geändert werden musste.

Unterm Strich

Mit einigen Grundkenntnissen von Web-Technologien ist es möglich, mobile Apps zu erstellen, die sich im Hinblick auf die Benutzererfahrung vor nativen Apps nicht zu verstecken brauchen, die sogenannten PWAs. Diese Anwendungen verbinden das Beste aus zwei Welten: die universelle Reichweite des Webs und den unverkennbaren Bedienungskomfort mobiler Apps.

(ID:49795007)