LimeSoda Blog ☰ Zeige Kategorien

Offline Formulare – Eine Anleitung

Folgendes Szenario: Ein Unternehmen stellt sich auf einer Messe vor und möchte am Stand Daten von potenziellen Neukunden sammeln, per Tablets natürlich. Just an jener Stelle, an der sich der Stand befindet, gibt es aber keine zuverlässige Internetverbindung. Was tun?!

Im Folgenden erfahrt ihr, wie man Webformulare offline verfügbar machen kann und warum gesendete Daten trotz fehlender Internetverbindung nicht verloren gehen müssen.

Service Worker

Damit das Formular offline überhaupt geladen werden kann, muss ein Service Worker eingebunden werden. Service Worker sind Skripte, die vom Browser im Hintergrund ausgeführt werden und unabhängig von der Webseite laufen.

Zum Generieren eines Service Workers kann beispielsweise das Node Module sw-precache verwendet werden. Es precacht bestimmte Dateien und macht sie dadurch offline verfügbar. Welche Dateien gecacht werden sollen, kann über Gulp festgelegt werden:

Nun muss der Service Worker noch in der index.html registriert werden:

Zuerst wird überprüft, ob der Browser Service Worker unterstützt, und in Folge der Service Worker registriert. Fertig, nun ist die Web App offline verfügbar.

Zum Testen und Debuggen von Service Workers eignen sich die Chrome DevTools sehr gut. Im Tab „Application“ kann unter anderem auch ein Offline Zustand simuliert werden.

Datensynchronisation

Natürlich möchte man ein Offline Formular nicht nur laden, sondern auch Daten speichern. Google entwickelt zu diesem Zweck die Background Sync API. Wie der Name schon erraten lässt, werden Daten bei fehlender Internetverbindung im Hintergrund gespeichert und erst dann mit dem Server synchronisiert, wenn eine stabile Internetverbindung hergestellt wurde. Für die User ist dabei nicht erkennbar, dass die Daten zu einem späteren Zeitpunkt in die Datenbank geschrieben werden.

Leider funktioniert Background Sync derzeit nur im Chrome. Soll das Offline Formular auch in anderen Browsern verwendet werden, kann man sich mit localStorage und den online/offline Events behelfen. Mit dieser Technik erzielt man das gleiche Ergebnis wie mit Background Sync, mit dem Vorteil, dass sie in allen gängigen Browsern unterstützt wird.

LocalStorage

LocalStorage greift auf ein lokales Storage Objekt zu, in welchem Daten ohne Ablaufzeit gespeichert werden können. Die Daten bleiben selbst dann erhalten, wenn der Browser geschlossen wird.

Hier wird ein assoziativer Eintrag gespeichert, in dem alle Formulardaten einer Person enthalten sind. Es sollte ein Key vergeben werden, damit der Eintrag wieder aus dem localStorage gelöscht werden kann:

Da im localStorage nicht unendlich viele Zeichen Platz haben, empfiehlt es sich, Einträge zu löschen, sobald sie nicht mehr benötigt werden.

Online Status erkennen

Ob eine Internetverbindung besteht oder nicht, kann in JavaScript mithilfe des Navigator Objekts abgefragt werden.

Das Property onLine liefert zurück, ob sich der Browser im Online oder Offline Modus befindet. In den meisten Fällen möchte man aber, dass die App automatisch reagiert, sobald eine neue Verbindung hergestellt wurde. Dazu gibt es die online/offline Events.

Wenn ein online Event gefeuert wird, kann man die Daten aus dem localStorage an ein Script schicken, welches die Daten in der Datenbank speichert. Voilà, fertig ist das Offline Formular.

Fazit

Mithilfe von navigator.onLine und den online/offline Events kann also ein Formular erstellt werden, welches auch ohne dauerhafte Internetverbindung Teilnehmerdaten speichern kann.

PS: Wird solch ein Formular wie im oben beschriebenen Szenario auf Mobilgeräten eingesetzt, empfiehlt sich die Verwendung einer Kiosk Browser App. Diese zeigt den Benutzern ein Browser Fenster, das nicht verlassen werden kann. Dadurch haben sie keinen Zugriff auf Geräteeinstellungen, gespeicherte Dateien usw.

Hinterlasse einen Fingerabdruck für die Ewigkeit: Ein Kommentar bei LimeSoda!

(*) Pflichtfeld

Bewirb dich bei uns!

LimeSoda.
Digitalagentur in Wien.

Bewirb dich jetzt!
Magdalena Posch

Verpasse nicht den nächsten Blog-Post von Magdalena!

Jetzt zum LimeSoda-Newsletter anmelden