© ecco/Shutterstock.com
PWAs offlinefähig machen

Offline First ist das neue Mobile First


Webapplikationen, die sich auf den unterschiedlichen Systemen verhalten wie native Applikationen: Das ist seit langer Zeit ein viel diskutiertes Thema. Mit dem Aufkommen der Progressive Web Apps (PWAs) ist dieses Ziel in greifbare Nähe gerückt. Das Ziel einer PWA ist es, dass sie auf jeder denkbaren Plattform funktioniert. Der Funktionsumfang der PWA wächst mit den technischen Möglichkeiten des Browsers, auf dem sie ausgeführt wird. So erscheint die PWA auf der einen Seite in einem älteren Browser als einfache Webapplikation und nutzt auf der anderen Seite die Schnittstellen eines modernen Browsers, lässt sich dort installieren und bietet zahlreiche weitere Features wie beispielsweise Pushnachrichten oder Offlinefähigkeit. Mit Letzterem, also der Offlinefähigkeit von Webapplikationen, werden wir uns im Folgenden etwas näher beschäftigen. Sie erfahren, wie Sie Ihre Applikation offlinefähig machen können, was Sie dabei beachten müssen und warum dafür ein Umdenken erforderlich ist.

Bevor wir uns jetzt Hals über Kopf in den Code einer Applikation stürzen, sollten wir zunächst klären, was der Begriff „offline“ überhaupt bedeutet. Für viele Internetbenutzer sind die Offline-Dinos der verschiedenen Browserhersteller ein Bild des Schreckens, bedeuten Sie doch, dass die angeforderte Ressource nicht geladen werden konnte. An genau dieser Stelle setzen offlinefähige Applikationen an und speichern die zur Anzeige benötigten Dateien lokal im Browser zwischen. Fragt der Benutzer dann im Offlinezustand die Webapplikation an, wird sie aus dem lokalen Zwischenspeicher geliefert. Doch mit den statischen Ressourcen endet die Offlinefähigkeit einer Applikation nicht. Neben Ressourcen wie HTML, CSS, JavaScript und den verschiedenen Mediendateien bestehen moderne Single Page Applications aus einer Vielzahl von Anfragen an einen Webserver. Über diese bezieht die Applikation die dynamischen Daten für die Anzeige. Dynamische Anfragen sind erheblich schwieriger lokal zwischenzuspeichern als statische, vor allem vor dem Hintergrund, dass es sich bei diesen dynamischen Anfragen nicht nur um lesende, sondern auch um schreibende Operationen handeln kann. Um diese und weitere Probleme werden wir uns im Zuge dieses Artikels kümmern.

Sprechen wir von einer Applikation im Offlinezustand, handelt es sich dabei um einen globalen Browserzustand, bei dem der Browser nicht mit dem Internet kommunizieren kann. Dieser Zustand kann über die onLine-Eigenschaft des navigator-Objekts des Browsers geprüft werden. Außerdem haben Sie die Möglichkeit mit den online und offline Events auf Änderungen des Onlinestatus des Browsers zu reagieren.

Schwieriger ist die Situation, wenn der Browser nicht vollständig vom Netz getrennt, sondern lediglich der Zielserver nicht erreichbar ist. Solche Situationen entstehen beispielsweise, wenn Sie mit einem WLAN verbunden sind, dieses Netz jedoch keinen Zugriff auf das Internet hat. In diesem Fall weist die Eigenschaft onLine den Wert true auf, eine Anfrage an den Server schlägt jedoch fehl.

Das Beispiel

Die Problemstellung einer offlinefähigen Applikation lässt sich am besten an einem konkreten Beispiel zeigen. Aus diesem Grund sehen wir uns im Folgenden eine einfache Applikation zur Verwaltung von Aufgaben an. Die Applikation wird als Single Page Application auf Basis von React und als Mehrbenutzersystem umgesetzt. Für das zentrale State Management kommt Redux mit der redux-saga-Middleware zur Verwaltung asynchroner Operationen zum Einsatz. Was für diese Kombination aus Bibliotheken gilt, kann mit wenigen Änderungen auch auf Angular- und Vue-Applikationen übertragen werden. Alle Lösungen verfolgen einen komponentenbasierten Ansatz und bieten ähnliche Strategien zur Datenkapselung.

Nach der Anmeldung an der Applikation sieht der Benutzer eine Liste seiner Aufgaben und hat die Möglichkeit, neue Aufgaben zu erzeugen und bestehende Aufgaben zu manipulieren oder zu löschen.

Der erste Schritt zur Offlinefähigkeit

Um die Offlinefähigkeit Ihrer Applikation sicherzustellen, müssen Sie zunächst dafür sorgen, dass die statischen Dateien wie HTML, CSS und JavaScript auch ohne aktive Internetverbindung verfügbar sind. Das erreichen Sie durch den Einsatz eines Service Workers. Hierbei handelt es sich um eine Art von Proxy zwischen der Applikation, die im Browser ausgeführt wird, und dem Webserver. Der Service Worker wird als eigenständiges Skript im Browser ausgeführt. Eine Besonderheit besteht dabei in der Tatsache, dass dieser Worker-Prozess nicht die ganze Zeit im Hintergrund ausgeführt wird, sondern, um Ressourcen zu schonen, nur zu bestimmten Zeitpunkten aktiv wird. Ein Beispiel für ein Ereignis, das dafür sorgt, dass der Service Worker aufgeweckt wird, ist die Anfrage an den Webserver. In diesem Fall können Sie die Anfrage direkt an den Server weiterleiten oder sie aus dem Cache des Service Workers bedienen, sodass die Anfrage den Browser nicht verlässt. Eine solche Caching-Strategie kann beispielsweise auch vorsehen, dass zunächst am Server angefragt und erst bei einem Misserfolg der lokale Cache verwendet wird. Die drei großen JavaScript Frameworks sehen die Service-Worker-Integration bereits vor. Das geschieht entweder nativ im Framework oder durch zusätzliche Pakete. Im Fall von React ist der Service Worker mit einer Standardkonfiguration bereits vorbereitet, allerdings standardmäßig deaktiviert. Um ihn zu aktivieren, müssen Sie in der index.js-Datei der Applikation die letzte Zeile in serviceWorker.register() ändern. Die Aktivierung gilt allerdings nur für den Produktivbetrieb, da das aggressive Caching des Service Workers während der Entwicklung zu Fehlern und unerwünschten Seiteneffekten führen kann. Für den Service Worker selbst gelten noch weitere Beschränkungen: Dieses Browserfeature ist nur in einem sogenannten sicheren Kontext verfügbar, also wenn die Applikation über eine verschlüsselte Verbindung ausgeliefert wird. Eine Ausnahme bildet der Domänenname localhost, bei dem der Service Worker zu Testzwecken auch über eine unverschlüsselte Verbindung verwendet werden kann.

Um aus einer Applikation eine vollwertige PWA zu machen, können Sie neben der Registrierung eines Service Workers noch eine Manifest-Datei verfassen und so dafür sorgen, dass sich Ihre Applikation installieren lässt. Bei der Manifest-Datei handelt es sich um eine JSON-Datei, die eine Reihe von Informationen wie beispielsweise den Namen der Applikation und einen Verweis auf die zu verwendenden Icons beinhaltet. Diese Datei wird von React bei der Erzeugung einer neuen Applikation ebenfalls erstellt und muss nur noch angepasst werden. Auch hier gilt, dass die Applikation über eine verschlüsselte Verbindung ausgeliefert werden muss, damit sie installierbar ist. Mit diesem Set-up können Sie die Applikation mit dem Kommando yarn build bauen und das Resultat im build-Verzeichnis dann mit einem Webserver ausliefern. Über das Browsermenü lässt sich die Applikation anschließend installieren und das Resultat über die Entwicklerwerkzeuge überprüfen.

Die Datenhaltung in der Applikation

Mit dem bi...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang