© DrHitch/Shutterstock.com
Progressive Web-Apps

2 Browserdatenbanken und Synchronisierung im Hintergrund


Zum Überbrücken schlechter und fehlender Datenverbindungen stützen sich progressive Web-Apps unter anderem auf Browserdatenbanken. Diese tragen auch zu einem augenblicklichen Anwendungsstart installierbarer Webanwendungen bei. Daneben erlauben Service Workers die Synchronisation mit dem Server im Hintergrund, sobald die Anwendung wieder online ist.

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. Zudem funktionieren sie auch offline und können so schlechte Datenverbindungen überbrücken.

Während das erste Kapitel das Cachen der Anwendungsdateien mittels Service Workers im Visier hatte, beschreibt dieses das lokale Vorhalten von Daten in Browserdatenbanken. Zusätzlich geht es auf die Möglichkeiten der Datensynchronisation im Hintergrund ein. Dabei handelt es sich um eine weitere Möglichkeit von Service Workers, die den UI-Thread entlastet und eine angeforderte Synchronisation bei Bedarf auch hinauszögert. Letzteres ist zum Beispiel bei einer schlechten Datenverbindung oder bei einem niedrigen Batteriestatus wünschenswert.

image

Abbildung 2.1: Fallbeispiel zum Verwalten von Flugbuchungen

Zur Veranschaulichung nutzt der vorliegende Text eine erweiterte Version des Fallbeispiels aus dem ersten Kapitel. Dabei handelt es sich um eine auf Angular 2 basierende App, die getätigte 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].

Kommunikation mit dem Server

Zum Zugriff auf den Server vermeidet der BuchungService die Nutzung des von Angular 2 dafür gebotenen Service Http. Dieser stützt sich in der verwendeten Version (RC 1) auf das bekannte XmlHttpRequest-Objekt (XHR). Abhängig vom genutzten Browser steht dieses Objekt jedoch nicht innerhalb von Service Workers zur Verfügung. Deswegen weicht die hier beschriebene Implementierung auf die von aktuellen Browsern gebotene Funktion fetch aus.

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 zu sehr das lokale Dateisystem 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 um Erlaubnis für eine Ausdehnung des Quotas; 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, abhängig vom Browser, 2 bis 10 Megabyte Speicherplatz. 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 Megabytes. Das W3C hat die Standardisierungsarbeiten an dieser Technologie jedoch zugunsten der IndexedDB, die neuere Browser in der Regel unterstützen, eingestellt. 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. Dem Namen entsprechend erlaubt sie auch eine Indizierung der gespeicherten Einträge. Daneben bietet sie auch Transaktionen, und die vorherrschenden Quotas bewegt sich, abhängig vom genutzten Browser, ebenfalls im Bereich mehrerer 100 Megabytes.

Die Nutzung der Index...

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

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