© DrHitch/Shutterstock.com
Shortcuts
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.

Shortcut Autorenteam


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.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. 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.Zum Speichern von Daten können Webanwendungen mittlerweile auf mehrere Browsertechnologien zurückgreifen. Gemäß de...

Shortcuts
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.

Shortcut Autorenteam


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.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. 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.Zum Speichern von Daten können Webanwendungen mittlerweile auf mehrere Browsertechnologien zurückgreifen. Gemäß de...

Neugierig geworden?


    
Loading...

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