,

Offline Web Applications mit HTML5 – Teil 1

September 5, 2014 - by manu.mukundan
Written by Kerstin Maier

Friday, 05 September 2014 00:00

Die Möglichkeit der Offline-Fähigkeit von webbasierten Applikationen ist eine Anforderung, die auch heute aus vielen Unternehmen nicht wegzudenken ist. Zwar geht der Trend im Zeitalter der mobilen Endgeräte wie Smartphones und PDAs heutzutage dahin, dass jeder 24 Stunden am Tag online ist.
Dennoch gibt es immer noch viele Situationen, in denen erwartet oder unerwartet auf eine Internetverbindung verzichtet werden muss. Eine offlinefähige Webanwendung ermöglicht es dem Anwender, auch in diesen Fällen weiterzuarbeiten, ohne dass er in seinem Arbeitsfluss gestört wird oder Daten verloren gehen. Auch die neue HTML5 Spezifikation beschäftigt sich mit der Anforderung “Offlinefähigkeit” und stellt einige Features zur Umsetzung bereit. In einer Reihe von Blogeinträgen wollen wir Ihnen diese vorstellen.
Das zentrale Feature zur Unterstützung von offlinefähigen Webanwendungen in der HTML5 Spezifikation ist die Offline Application Caching API. Darüber hinaus gibt es einige ergänzende eigenständige Spezifikationen, die das Ziel haben, weitere Offline-Funktionalität zur Verfügung zu stellen.

Die Offline-Features von HTML5 bestehen aus den folgenden Komponenten:
Die Offline Application Caching API (ApplicationCache)

  • Die Web Storage Spezifikation: umfasst eine API zur clientseitigen Speicherung von session-spezifischen Daten und eine API zur Speicherung von sessionübergreifenden Daten
  • Die Web SQL-Database: eine clientseitige JavaScript Datenbank
  • Web Workers: zur Ausführung von parallelen “Background” Prozessen im Client
  • Dieser Blogeintrag befasst sich mit dem HTML5 Application Cache. Die weiteren Spezifikationen werden in folgenden Blogeinträgen vorgestellt.

Die HTML5 Application Caching API

Ein Application Cache ist ein Set von gecachten Ressourcen, die durch URLs identifiziert werden. HTML5 bietet dem Entwickler einer Webapplikation die Möglichkeit, eine Manifest-Datei zu erstellen, in der er alle Files angibt, die der Browser cachen soll (also alle Files die notwendig sind um die Seite offline korrekt darzustellen).

Um das Caching einer Seite zu ermöglichen, muss das HTML-Attribut „manifest“ am <html> element definiert werden:
<!DOCTYPE HTML> <html manifest=”/cache.manifest”> <body> … </body> </html>
manifest.cache ist hierbei der Name der Manifest Datei.
Der folgende Kasten zeigt eine beispielhafte Manifest Datei:#v1 – Version der manifest Datei
CACHE MANIFEST index.html stylesheet.css images/logo.png scripts/misc.js NETWORK: search.php login.php FALLBACK: images/dynamic.php static_image.png

Die Manifest Datei muss immer mit CACHE MANIFEST beginnen und besteht aus den folgenden Teilen:
CACHE: dieser Abschnitt definiert die zu cachenden Ressourcen
NETWORK: definiert eine Whitelist, hier aufgelistet sind Ressourcen die nie gecacht werden dürfen und immer eine Verbindung zum Server benötigen. Falls der User nicht online ist, soll der Browser keine gecachte Version dieser Files benutzen.
FALLBACK: dieser Bereich ist zum Bereitstellen einer Backup-Strategie gedacht. Kann der Browser die zu cachenden Files aus irgendeinem Grund nicht laden, werden stattdessen die Fallback Resourcen benutzt. Jede Zeile unter Fallback besteht aus 2 URIs. Die zweite URI ist dabei eine URI die der Browser benutzen soll, wenn die Dateien unter der 1. URI nicht gefunden werden können.
Im Beispiel soll ein statisches Bild geladen werden, falls die Daten unter images/dynamic.php nicht geladen werden können.

Alle Zeilen, die mit # anfangen, werden als Kommentar betrachtet.
Wie funktioniert nun das Caching? Ruft der Anwender eine Seite auf für die ein Cache definiert wurde, versucht der Browser dieses zu aktualisieren. Er lädt sich zunächst eine Kopie des Manifests. Beim ersten Aufruf lädt er alle Resourcen in den Cache.

Wird die Seite erneut aufgerufen, überprüft er, ob sich das Manifest verändert hat. Falls ja, werden alle Ressourcen erneut heruntergeladen. Der Cache wird nicht aktualisiert, wenn sich nur Dateien, die darin eingetragen sind, verändert haben. Um ein Update zu triggern, muss also der Inhalt der Manifest-Datei verändert werden (zum Beispiel kann man die Versionsnummer im Kommentar hochzählen).

HTML5 definiert auch eine API, um Veränderungen am Cache manuell herbeizuführen. Diese umfasst verschiedene Methoden zum Abfragen des Online/Offline Status, zum manuellen Aktualisieren oder Leeren des Caches und die Möglichkeit EventListener zu registrieren, um auf verschiedene Cache Events zu reagieren. Das programmatische Hinzufügen und Entfernen von Ressourcen, die gecacht werden sollen, ist aktuell noch nicht möglich.

Der folgende Aufruf ermöglicht den Zugriff auf das ApplicationCache Objekt des aktiven Fensters:
cache = window.applicationCache
Die zentralen Methoden der API sind:
cache.update()
Der Cache des aktuellen Dokuments wird im Hintergrund aktualisiert
cache.swapCache()

Die Methode triggert einen Wechsel zum aktuellsten Application Cache, falls es eine neuere Version gibt. Wenn diese Methode aufgerufen wird, werden Ressourcen die zuvor geladen wurden nicht automatisch neu geladen. Nur bei folgenden Requests auf zu cachende Ressourcen werden die neuen Versionen geladen.

Aktueller Stand

Zum jetzigen Zeitpunkt wird der Offline Application Cache von den folgenden Browsern unterstützt:
Mozilla Firefox (ab 3.5)
Safari (ab 4.0)
Google Chrome (ab 4.0)

Externe Links
HTML5 Spezifikation – Kapitel Offline Web Applications
Demo Anwendung bei html5demos.comDemo Anwendung bei html5demos.com

Ausblick

Im nächsten Blogeintrag stellen wir Ihnen die Web Storage und die Web SQL Database Spezifikation vor, die es ermöglichen, auch größere fachliche Datenmengen im Client offline verfügbar zu machen.

Leave a comment