Open Source im professionellen Einsatz
Linux-Magazin 10/2012
© Oksana Byelikova, 123RF.com

© Oksana Byelikova, 123RF.com

Offline-fähige Anwendungen mit HTML 5

Ohne Netz

Ein Offlinespeicher im Browser und ein Schuss HTML-5-Akrobatik ergeben interaktive Webanwendungen, die auch dann noch funktionieren, wenn die Internetverbindung abreißt. Als Kür zaubert das folgende Beispiel ein GUI, das auf Desktops wie Smartphones eine gute Figur macht.

743

Webbrowser waren ursprünglich reine Viewer für statische HTML-Dokumente aus dem WWW. Seit HTML 2 können sie auch simple Benutzereingaben mittels Formularen erfassen und zum Speichern an eine Datenbank im Internet senden, doch ist dafür die Verfügbarkeit des Netzes Voraussetzung. Bei jeder Netzwerkstörung verliert der genervte Benutzer seine Arbeit komplett.

Offline – na und?

HTML 5 [1] bietet deshalb verschiedene Techniken, um Webanwendungen offline-fähig zu gestalten. Dafür bedarf es zunächst eines Application Cache, der die Bestandteile der Anwendung selbst speichert, etwa HTML- und Javascript-Dateien. Für die veränderlichen Sitzungsdaten stehen gleich drei verschiedene Speicher-Implementierungen zur Verfügung: Local Storage speichert Schlüssel-Wert-Paare, Web SQL speichert Daten in einer SQL-, Indexed DB in einer No-SQL-Datenbank.

Zusammenspiel vieler Technologien

In Geotracker [2], der Beispielanwendung zu diesem Artikel, wirken viele Webtechnologien zusammen (Abbildung 1):

Abbildung 1: Die Beispielanwendung Geotracker, hier unter Chrome auf einem Android-Smartphone, vereint viele Webtechnologien in sich.

Local Storage, Web SQL und Indexed DB sorgen dafür, dass die Anwendungsdaten auch offline verfügbar sind. Das Geolocation-API ortet das Mobilgerät des Benutzers, die Bibliothek Open Layers zeigt den Standort auf einer Karte an. Jquery Mobile zeichnet eine grafische Benutzeroberfläche, die auf Webbrowsern für den Desktop ebenso funktioniert wie auf Smartphones und Tablets. Couch DB schließlich speichert die Standorte Server-seitig, damit sie mehreren Anwendern zur Verfügung stehen.

Der Artikel stellt diese Technologien zunächst im Detail vor. Danach kommen sie in einer Beispielanwendung zum Einsatz, die ein offline-fähiges Tool zum Speichern von Geokoordinaten (Geolocations) umsetzt. Dank HTML 5 läuft diese App auf der größtmöglichen Zahl von Geräten – überall da, wo Firefox (aktuell 14) , Opera (12), Chrome (21), Safari und Internet Explorer (9) zu finden sind.

Webbrowser versuchen die Zahl der Netzwerkzugriffe möglichst gering zu halten. Dateien, die sie bereits einmal vom Webserver geholt haben, bewahren sie zur Wiederverwendung im Cache auf. Der Webserver unterstützt den Browser dabei, beispielsweise indem er im Kopf der HTTP-Antwort den Status 304 sendet. Dies signalisiert dem Webbrowser, dass sich die erneut angefragte Datei nicht geändert hat. Dieser Cache ist jedoch nicht für den Offline-Einsatz geeignet.

Application Cache

Um eine Webanwendung dauerhaft im Webbrowser zu speichern, etabliert HTML 5 den Application Cache [3]. Dessen Steuerdatei ist ein Cache Manifest, das auf dem Webserver liegt. Das Manifest in Listing 1 veranlasst den Browser dazu, alle Dateien im Application Cache zu speichern, die nach dem Schlüsselwort »CACHE« aufgeführt sind. Im Cache Manifest lassen sich URLs, relative oder absolute Pfade verwenden.

Listing 1

Cache Manifest

01 CACHE MANIFEST
02
03 CACHE:
04 index.html
05 js/jquery-1.7.1.min.js
06 js/script.js
07 js/jquery.mobile-1.1.0.min.css
08 js/jquery.mobile-1.1.0.min.js
09 js/OpenLayers.js
10
11 NETWORK:
12 /couchdb/
13 *

Bevor der Browser die Dateien speichern darf, muss der Benutzer zustimmen. Falls der Browser nicht nachfragt, kann das der Anwender etwa aus dem Firefox-Kontextmenü unter »Seiteninformationen | Berechtigungen« einstellen. In der untersten Zeile von Abbildung 2 hat der Benutzer der Verwendung des Application Cache, dem Speichern der Daten, in der vorletzten Zeile der Ortung per Geolocation zugestimmt.

Abbildung 2: Unter den seitenspezifischen Einstellungen von Firefox setzt der Benutzer die Berechtigungen für die Geolocation und den Offlinespeicher.

Die URLs aus dem Abschnitt »NETWORK« im Cache Manifest (Listing 1) landen nicht im Application Cache, der Browser erfragt sie jedes Mal vom Webserver. Der Platzhalter »*« erlaubt es, auf jede URL im WWW zuzugreifen. Das Cache Manifest verknüpft der Entwickler durch Angabe eines Pfades im Attribut »manifest« mit einer HTML-Datei (Listing 2). Diese Pfadangabe ist relativ zur HTML-Datei. Beim erstmaligen Aufruf liest der Browser das Cache Manifest asynchron und speichert die Dateien aus dem Abschnitt »CACHE« im Application Cache. Bei jedem folgenden Aufruf der HTML-Datei überprüft der Webbrowser die Gültigkeit des Manifests. Ist es nach wie vor gültig, lädt der Webbrowser die Dateien aus dem Application Cache – beispielsweise wenn der Webbrowser im Offlinemodus läuft oder gerade keine Netzwerkverbindung besteht.

Listing 2

Manifest einbinden

01 <!DOCTYPE HTML>
02 <html manifest="geotrack.appcache">
03 [...]
04 </html>

Ändert sich das Manifest auch nur um ein Bit, liest der Webbrowser es neu ein und lädt die Dateien aus dem Abschnitt »CACHE« abermals in den Application Cache. Chrome gewährt Einblick in die Verarbeitung des Cache-Manifests (Abbildung 3). Damit der Webbrowser das Manifest erkennt, ist im Apache-Webserver der passende MIME-Typ mit »AddType cache-manifest .appcache« einzurichten.

Abbildung 3: Auskunftsfreudig: Chrome meldet die Verarbeitungsschritte des Cache-Manifests in seiner Konsole für Webentwickler.

Diesen Artikel als PDF kaufen

Express-Kauf als PDF

Umfang: 7 Heftseiten

Preis € 0,99
(inkl. 19% MwSt.)

Linux-Magazin kaufen

Einzelne Ausgabe
 
Abonnements
 
TABLET & SMARTPHONE APPS
Bald erhältlich
Get it on Google Play

Deutschland

Ähnliche Artikel

  • React

    Vom Unternehmen Facebook kommt das quelloffene Javascript-Framework React, das Weboberflächen geschickt mit Datenschätzen verknüpft. Insbesondere die Renderfunktion macht sich dabei nützlich.

  • Firefox OS

    Javascript, HTML 5 und jede Menge Linux- und Android-Erbschaften: Das ist Firefox OS, das Smartphone-Betriebssystem, mit dem Mozilla auf den Markt der günstigen Smartphones drängt. Das Linux-Magazin hat die ersten beiden Referenz-Entwicklergeräte Keon und Peak von Geeksphone getestet.

  • Gut sortiert

    Große Datenmengen auf Webseiten übersichtlich anzuordnen ist eine Kunst. Am schnellsten gelänge es mit Javascript direkt im Client - wäre da nicht das spröde Document Object Model. Die Bibliothek Jquery erleichtert Entwicklern das Leben, indem sie die Skriptsprache aufpeppt und von Browsern abstrahiert.

  • Firefox-OS-Apps

    Erst Apps bringen die Smartness aufs Smartphone, da macht Firefox OS keine Ausnahme. Im Unterschied zur Konkurrenz bauen die Entwickler ihre Apps jedoch mit offenen Webtechnologien wie HTML 5, Javascript und CSS 3. Der Artikel zeigt das exemplarisch anhand einer App zum Stimmen von Gitarren.

  • Backbone.js

    Die Javascript-Engines moderner Browser sind leistungsfähig genug, um die Anwendungslogik zu übernehmen. Wie auf dem Server beschleunigen auch hier Frameworks die Entwicklung. Ein herausragendes Beispiel für diese Gattung ist Backbone.js, das ein lokales Datenmodell umsetzt.

comments powered by Disqus

Ausgabe 09/2017

Artikelserien und interessante Workshops aus dem Magazin können Sie hier als Bundle erwerben.