Offline Web Applications mit HTML5 – Teil 3

Written by Kerstin Maier

Friday, 05 September 2014 00:00

Bei der Ausführung von offlinefähigen Webanwendungen spielt die Datensynchronisation eine große Rolle, da die Daten zwischen Online- und Offlinebetrieb ständig „out of synch“ geraten.

Beim Wechsel von Offline- in den Onlinebetrieb müssen neue Daten vom Server geladen werden und offline erstellte oder veränderte Daten an den Server übertragen werden. Die Daten müssen hierbei synchronisiert werden. Dabei kann es zu Synchronisationsprozessen mit größeren Datenmengen kommen.

Damit durch die in JavaScript durchgeführten Synchronisationsarbeiten die Benutzeroberfläche nicht ruckelt oder blockiert und der Anwender ungestört weiterarbeiten kann, ist es notwendig, diese Synchronisationsprozesse im Hintergrund ablaufen zu lassen. Eine mögliche Lösung für diese Anforderung bietet die neue Web Workers Spezifikation des W3C Konsortiums. Diese stellen wir Ihnen nun im dritten Teil der Blogserie zum Thema „Offline Web Applications“ vor. Web Workers ist nicht Teil des HTML5 Standards, sondern eine ergänzende eigenständige Spezifikation.

Ziele

Mit Web Workers wird es möglich, JavaScript Prozesse im Hintergrund unabhängig von Frontend-JavasScript Prozessen auszuführen. So können langlebige Skripte erstellt werden, welche nicht von Skripten unterbrochen werden, die durch Anwender-Interaktionen an der Oberfläche ausgelöst werden. Ebenso beeinflussen die langlebigen Web Workers Prozesse die Verfügbarkeit des Frontends nicht. Web Workers sind dazu gedacht, langlaufende oder speicherintensive Aufgaben wie zum Beispiel komplexe Berechnungen zu bearbeiten. Somit eignet sich Web Workers auch sehr gut dafür, die Synchronisationsaufgaben in einer offlinefähigen Webapplikation zu übernehmen.

Funktionsweise

Um einen Web Worker Prozess zu starten, muss zunächst ein Worker Objekt erzeugt werden. Dann können mit einer postMessage Methode Daten an den Worker gesendet werden, ebenso kann der Worker mit einer eigenen postMessage Methode Daten zurückschicken. Mit Event Handlern können der Worker und der Aufrufer auf empfangene Nachrichten oder Fehler reagieren.

Verwendungsbeispiel

Im ersten Schritt wird ein Worker erzeugt:
// worker.js ist das Skript, das den Worker implementiert
var worker = new Worker(“worker.js”);
Mit postMessage wird eine Nachricht mit Daten an den Worker gesendet:
worker.postMessage(messageData);

Im JavaScript des Web Workers wird auf das onmessage Event reagiert:
// Sourcecode Ausschnitt des workers.js
onmessage = function (evt) {
// evt.data sind die von der aufrufenden Seite bergebenen Daten
// Tue etwas mit den Daten
startSynchronisation(evt.data)
// Benachrichtige den Aufrufer über das Ergebnis
postMessage(resultInfo);

Wenn der Web Worker eine Nachricht sendet, kann in der Seite ebenfalls mit onMessage darauf reagiert werden:
worker.onmessage = function (evt) {
// Die Antwort des Workers verarbeiten (hier einfach ausgeben)
alert(evt.data);
};

Falls der Worker einen Fehler wirft, kann in der Seite mit onerror darauf reagiert werden:
worker.onerror = function (evt) {
alert(evt.data);
};

Browserunterstützung

Web Workers wird von den aktuellen Versionen der Browser Mozilla Firefox, Safari, Opera und Google Chrome unterstützt. Internet Explorer unterstützt das Feature nicht.

Aktueller Stand zu den HTML5 Offline Features
Dieser Blogeintrag schließt den Überblick über die Offline Funktionalität der HTML5 Spezifikation und der ergänzenden Spezifikationen ab. Seit dem letzten Blogeintrag hat sich noch eine Veränderung ergeben. Die „Web SQL Spezifikation“ wird nicht mehr aktualisiert. Dafür ist eine neue Spezifikation in den Fokus gerückt, die „Indexed Database API“, kurz IndexedDB.

Bei der IndexedDB handelt es sich um einen „Object Store“. Wie in einer SQL Datenbank gibt es Datenbankeinträge („Records“) und jeder Eintrag hat auch Felder („Fields“) von einem bestimmten Datentyp. Man kann ein Subset von Einträgen laden und mit einem Cursor darüber navigieren. Der Hauptunterschied der IndexedDB zu einer SQL Datenbank liegt darin, dass es keine Strukturierte Abfragesprache gibt. Es wird also nicht mit Ausdrücken wie „SELECT * FROM USER“ auf Daten zugegriffen. Stattdessen bietet der Object Store Methoden, um einen Cursor auf einer Datenbank zu öffnen, mit dem Cursor Einträge durchzuzählen, Einträge auszufiltern und mit Zugriffsmethoden auf die Felder der verbleibenden Einträge zuzugreifen.

IndexedDB wird aktuell noch von keinem der großen Browser unterstützt, das kann in ein paar Monaten aber schon ganz anders ausschauen. Mozilla plant IndexedDB in Firefox 4 zu unterstützen. Google und Microsoft haben generell Interesse bekundet. Entsprechend unterstützt könnte IndexedDB eine gute Alternative zur Web SQL Database darstellen. Web SQL Database wird durch das Problem der potentiell unterschiedlichen SQL Dialekte bzw. die Fokussierung auf SQLite bei den bestehenden Implementierungen ausgebremst. Dieses Problem stellt sich mit IndexedDB nicht. Mozilla hat sich dazu entschieden, den Web SQL Database Standard nicht zu unterstützen. Auf der Mozilla.org Webseite gibt es einen kurzen Vergleich über die Benutzung der beiden Spezifikationen Web SQL Database und IndexedDB, sowie Hintergrundinfos dazu, warum IndexedDB von Mozilla präferiert wird.
Mozilla.org: Comparing IndexedDB and Web Database

Externe Links
Spezifikation Web Workers
Spezifikation IndexedDB

Fazit

Zusammengefasst lässt sich sagen, dass die vorgestellten Spezifikationen einen umfangreichen Werkzeugkasten für die Erstellung von Offline Features bei Webanwendungen bereitstellen. Wie auch bei der restlichen HTML5 Spezifikation liegen die Schwächen bisher noch in den Unterschieden und Defiziten bei der Browser Unterstützung. Vor allem der Internet Explorer hinkt in der HTML5 Unterstützung generell stark hinterher. Dies dürfte mit die größte Hürde beim Einsatz von HTML in größeren Unternehmen darstellen, da der Internet Explorer dort oft noch als Standard gesetzt ist oder zumindest mit unterstützt werden muss. Ebenso muss bei den JavaScript-Datenbanken sicher noch einige Zeit abgewartet werden, ob es hier in absehbarer Zeit eine Spezifikation gibt, die von allen Browser Herstellern unterstützt wird.

Leave a comment