Offline first

In diesem Artikel möchte ich über einen Aspekt der Webentwicklung sprechen, den ich nicht so oft diskutiert sehe: Offline First Apps oder genauer gesagt die Kombination von PouchDB und CouchDB, die für diesen Zweck verwendet wird.

Zunächst einmal, was ist mit Offline First gemeint?

Es bedeutet, dass deine App unabhängig von einer Netzwerkverbindung funktionieren kann. Alle Interaktionen werden vom Browser selbst abgewickelt, einschließlich der Datenmanipulation. Nur während du Zugriff auf das Netzwerk hast, werden die lokalen Daten mit dem Server synchronisiert.

Warum sollte man das in einer Welt des allgegenwärtigen mobilen Internets brauchen?

Nun, selbst wenn es normalerweise ein gutes mobiles Netzwerk gibt, kann es immer wieder Fälle geben, in denen es nicht verfügbar ist. In Gebäuden ist das Netz vielleicht gestört. Oder eines meiner Lieblingsbeispiele: Bahnfahrten in Deutschland. Zwischen größeren Städten gibt es sehr oft Regionen mit keiner oder sehr langsamer Verbindung.

Auf der anderen Seite könnte der Server, der deine Anfragen bearbeitet, überlastet sein, was zu Verzögerungen bei der Antwort führt.

Außerdem bist du nicht von der Latenzzeit des Netzwerks zwischen dir und dem Server abhängig. Das bedeutet, dass die Geschwindigkeit der App immer gleichbleibend und in vielen Fällen sogar schneller ist. Allerdings hängt das auch von der Geschwindigkeit des Geräts selbst ab.

Durch die Nutzung der Ressourcen des Geräts reduziert d sich zusätzlich die Last auf den Servern, die meist nur mit der Synchronisation von Daten beschäftigt sind.

Der Nachteil

Abgesehen davon funktioniert der Offline-First-Ansatz nicht für alles. Vor allem nicht für alle transaktionalen Anwendungen wie Banking oder Trading. Aber auch hier kann es einen Zweck erfüllen, indem man z.B. den letzten Kontostand speichert, um diesen auch offline zu sehen.

Warum PouchDB?

Von der offiziellen Website https://pouchdb.com/:

PouchDB ist eine Open-Source-JavaScript-Datenbank, die von Apache CouchDB inspiriert wurde und so konzipiert ist, dass sie gut im Browser läuft. PouchDB wurde entwickelt, um Webentwicklern zu helfen, Anwendungen zu erstellen, die offline genauso gut funktionieren wie online. Es ermöglicht Anwendungen, Daten lokal zu speichern, während sie offline sind, und sie dann mit CouchDB und kompatiblen Servern zu synchronisieren, wenn die Anwendung wieder online ist, um die Daten des Benutzers synchron zu halten, egal wo er sich das nächste Mal einloggt.

Intern im Browser verwendet es IndexedDB, das dafür ausgelegt ist, "große Mengen an strukturierten Daten zu speichern, einschließlich Dateien/Blobs" (https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API).

Es werden JSON-Dokumente gespeichert, die das Attribut _id haben, das als Schlüssel des Dokuments dient. Ein weiteres solches Attribut ist _rev, das die Versionsnummer des Dokuments festhält, welche intern von PouchDB vergeben wird. Aber jedes Mal, wenn das Dokument aktualisiert wird, muss der neueste _rev-Wert vorhanden sein, sonst bekommt man einen Konflikt bei der Aktualisierung des Dokuments. Ansonsten kann man alle gültigen JSON-Daten in diesen Dokumenten speichern.

Vorteile von PouchDB im Vergleich zur direkten Verwendung der Browser APIs zum Speichern von Daten

Da es nahtlos mit CouchDB zusammenarbeitet, übernimmt es die Aufgabe, PouchDB Dokumente mit CouchDB zu synchronisieren, indem es nur eine Methode aufruft. CouchDB ist die Serveranwendung, die alle Dokumente tatsächlich dauerhaft speichert, damit sie nicht verloren gehen, wenn man den Browser-Speicher löscht und um diese Dokumente zwischen verschiedenen Geräten zu verteilen.

Der Synchronisationsmechanismus hat sich in meiner bisherigen Nutzung als sehr zuverlässig erwiesen. Er verfügt über einen Back-Off-Algorithmus, der in größeren Intervallen überprüft, ob man wieder online ist, nachdem man offline gegangen ist.

PouchDB bietet auch einen Mechanismus, mit dem man alle Änderungen an Dokumenten in der Datenbank abonnieren kann. Das macht es möglich, es als einen leichten Message-Bus zu verwenden, der das Frontend benachrichtigt, um zum Beispiel die Ansicht eines Dokuments zu aktualisieren.

Konkretes Anwendungsszenario

Ein konkretes Beispiel, bei dem PouchDB zum Speichern der Daten verwendet wird, ist die Anwendung https://bootstrpd.com von KAPSLY. Hier können Sie Ihre Zeit- und Geldbeiträge, die Sie für ein Projekt geleistet haben, verfolgen. Besonders die Zeiterfassung ist etwas, das man immer zur Verfügung haben möchte und nicht nur, wenn man eine Internetverbindung hat. Es ist wirklich ärgerlich, wenn Sie etwas nachverfolgen wollen, aber es nicht können, weil kein Netzwerk oder zu viel Latenz vorhanden ist.

Alle Metriken werden auch im Browser berechnet und gespeichert, waseine superschnelle Auswertung der aktuellen Verteilung der Beiträge jedes Benutzers im Projekt ermöglicht.

Fazit

Dieser Artikel gab eine kurze Einführung in Offline First Apps, ihre Vorteile und ihre Nachteile. Hoffentlich hilft dir das bei der Entscheidungsfindung für die Entwicklung deiner nächsten App unter Berücksichtigung, dass diese auch Offline First erstellt werden kann.

Wenn du mehr über PouchDB und seine Funktionsweise erfahren möchtest, kannst du diese Anleitung für die ersten Schritte ausprobieren: https://pouchdb. com/getting-started.html

Achim Rohn