© Excellent backgrounds/Shutterstock.com
Teil 2: Browserdatenbanken und Synchronisierung im Hintergrund

Immer da - online und offline


Zum Überbrücken schlechter und fehlender Datenverbindungen stützen sich Progressive Web Apps unter anderem auf Browserdatenbanken. Diese tragen auch zu einem direkten Anwendungsstart installierbarer Webanwendungen bei. Daneben erlauben Service Workers die Synchronisation mit dem Server im Hintergrund, sobald die Anwendung wieder online ist. Diesmal schauen wir uns an, wie sich Daten in Browserdatenbanken verhalten.

Video: Wiederverwendbare Komponenten mit Angular 2.0 – Deep Dive

Progressive Web Apps kombinieren die Vorzüge moderner Webanwendungen mit dem Verhalten ihrer nativen Gegenstücke. Sie lassen sich am Home-Bildschirm installieren und starten dank Caching-Strategien unverzüglich. Auf diese Weise sind sie für den Benutzer sofort von Nutzen. Daneben funktionieren sie auch offline und können so schlechte Datenverbindungen überbrücken.

Zur Veranschaulichung nutzen wir eine erweiterte Version des Fallbeispiels aus dem ersten Teil dieser Artikelserie. Dabei handelt es sich um eine auf Angular 2 basierende App, die Flugbuchungen präsentiert. Die beschriebenen Erweiterungen speichern diese Buchungen in einer Browserdatenbank und geben dem Benutzer die Möglichkeit, sich für einen Flug einzuchecken. Dabei ändert sich der Status der Buchung, den die Anwendung per Hintergrundsynchronisation zum Server überträgt. Den vollständigen Quellcode dieses Fallbeispiels findet man unter [1] (Abb. 1).

steyer_angular2_progressive_teil2_1.tif_fmt1.jpgAbb. 1: Fallbeispiel zum Verwalten von Flug­buchungen

Unterstützung durch Browserdatenbanken

Zum Speichern von Daten können Webanwendungen mittlerweile auf mehrere Browsertechnologien zurückgreifen. Gemäß der Same-Origin Policy (SOP) hat jede Webanwendung nur Zugriff auf ihre eigenen Daten. Zu berücksichtigen gilt, dass ein Löschen des Caches, je nach Einstellungen, auch ein Entfernen der gespeicherten Daten zur Folge hat. Daneben ist auch auf die von den Browsern definierten Quotas Rücksicht zu nehmen. Diese sollen verhindern, dass eine Anwendung das lokale Dateisystem zu sehr belastet. Je nach Browser fallen sie bei den einzelnen Speicherformen unterschiedlich aus. Auch das Verhalten der Browser beim Erreichen der Quotas variiert: In manchen Fällen bitten die Browser den Benutzer für eine Ausdehnung des Quotas um Erlaubnis; in anderen Fällen verweigern sie einfach das Hinterlegen weiterer Einträge. Einen Überblick zum Verhalten der einzelnen Browser bietet [2].

Der wohl einfachste Datenspeicher ist der so genannte Local Storage, den sämtliche gängigen Browser unterstützen. Er erlaubt das Speichern von Name/Wert-Paaren und bietet den einzelnen Webanwendungen 2 bis 10 MB, abhängig vom Browser. Aufgrund dieser Beschränkungen kommt er primär für einfache Daten zum Einsatz. Daneben bieten manche Browser mit der Web SQL Database eine relationale Datenbank. Die Quotas für diese SQL-basierte Datenbank erstrecken sich bis auf mehrere 100 MB. Das W3C hat die Standardisierungsarbeiten an dieser Technologie jedoch zugunsten der IndexedDB eingestellt, die neuere Browser in der Regel unterstützen. Hierbei handelt es sich um eine NoSQL-Lösung, die das Speichern ganzer Objektbäume erlaubt. Webanwendungen müssen somit die vom Server empfangenen Informationen nicht im relationalen Sinn auf verschiedene Tabellen aufteilen, sondern können sie als Ganzes persistieren. Wie der Name vermuten lässt, erlaubt sie auch eine Indizierung der gespeicherten Einträge. Daneben bietet sie auch Transaktionen, und die vorherrschende Quotas bewegt sich ebenfalls im Bereich mehrerer 100 MB, abhängig vom genutzten Browser.

Die Nutzung der IndexedDB gestaltet sich aufgrund ihres sperrigen, asynchronen API ein wenig schwierig und führt rasch zu unübersichtlichen Codestrecken. Deswegen bietet sich der Einsatz von zusätzlichen Bibliotheken an. Diese abstrahieren auch häufig den genutzten Datenspeicher und verhindern somit eine direkte Abhängigkeit zur IndexedDB. Somit können Anwendungen jeweils die am besten geeignete Persistenztechnologie nutzen, die der jeweilige Browser zu bieten hat. Ein Beispiel dafür ist die im nächsten Abschnitt vorgestellte Datenbank PouchDB.

Wie PouchDB funktioniert

PouchDB ist eine quelloffene JavaScript-basierte Datenbank, die unte...

Neugierig geworden?

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang