HTML5 Logo

HTML5 Vortrag - DHBW Mannheim


Martin Eberle, Jan Rexer, Christopher Riedel

3. Offline

In diesem Kapitel wird die Nutzung von Offline Caching zu Erstellung von Offline Web applications behandelt. Die aktuelle "Working Draft" Spezifikation von HTML5 sieht hierfür das Zwischenspeichern (engl. caching) von Dateien mittels Cache-Manifest vor, welches im Kapitel "5.6 Offline Web applications" vom W3C beschrieben wird.

3.1 Erläuterung Offline Web applications

Um dies zu realisieren ist die Zwischenspeicherung der Webseite lokal auf dem Gerät notwendig.

weiterlesen...

3.2 Funktionsweise Offline Caching

	CACHE MANIFEST
	index.html
	style.css
	image.png

weiterlesen...

3.3 Einsatz von Offline Caching im Praxisbeispiel

In der Praxis wird die Speicherung von Offline Daten via Manifest-Datei wie im nachfolgenden Quellcode dargestellt realisiert:

HTML-Datei, z.B. "index.html":

<!DOCTYPE html>
<html manifest="cache.manifest">
	<head>
		<meta charset="utf-8" />
		<title>Titel der Webseite</title>
		<link rel="stylesheet" type="text/css" media="all" href="style.css" />
	</head>
	<body>
		<img src="image.png" alt="Bild wird immer angezeigt" />
		<p>...</p>
	</body>
</html>

Manifest-Datei, hier "cache.manifest":

CACHE MANIFEST

# Diese Zeile ist ein Kommentar
# Version 1 vom 17.04.2011

CACHE:
index.html
style.css
image.png

In diesem Fall werden nun die Dateien index.html, style.css und image.png lokal auf dem Endgerät gespeichert und sind auch ohne Netzverbindung verfügbar. Sinn macht das hier allerdings noch wenig, da die Website keinerlei Funktionsumfang bietet und somit auch das Offline Caching keinen weiteren Nutzen bringt. Dieses Beispiel soll aber auch nur die grundsätzliche Funktionsweise leicht verständlich erläutern.

3.4 Variationen: FALLBACK, NETWORK im Praxisbeispiel

Wie bereits oben erwähnt, gibt es die beiden optionalen Variationen "NETWORK:" und "FALLBACK:", diese können wir wie folgt einsetzen:

HTML-Datei, z.B. "index.html":

<!DOCTYPE html>
<html manifest="cache.manifest">
	<head>
		<meta charset="utf-8" />
		<title>Titel der Webseite</title>
		<link rel="stylesheet" type="text/css" media="all" href="style.css" />
	</head>
	<body>
		<img src="image.png" alt="Grafik wird immer angezeigt" />
		<p>Diese Webseite ist momentan in folgendem Modus:
		<img src="online-image.png" alt="Bei bestehender Verbindung zum Webserver
		wird die online Grafik angezeigt, andernfalls das offline Bild" />
		...
		</p>
	</body>
</html>

Manifest-Datei, hier "cache.manifest":

CACHE MANIFEST
 
# Diese Zeile ist ein Kommentar
# Version 2 vom 17.04.2011
 
CACHE:
index.html
style.css
image.png
 
NETWORK:
online-image.png
 
FALLBACK:
online-image.png offline-image.png

Jetzt speichert der Browser die Dateien index.html, style.css, image.png und auch die Datei offline-image.png lokal ab. Wird die Website mit aktiver Netzverbindung aufgerufen, wird die in der "NETWORK:" Sektion definierte Grafik "online-image.png" angezeigt, besteht jedoch keine Netzverbindung, wird die in der "FALLBACK:" Sektion definierte und lokal gespeicherte Ersatzgrafik "offline-image.png" stattdessen angezeigt.

Nun hat die Webseite immerhin schon die "Funktion" dem Benutzer anzuzeigen, ob er gerade eine Netzverbindung, also eine Verbindung zum Webserver hat oder nicht.

Android online
Android online

Android offline
Android offline

iPad online
iPad online

iPad offline
iPad offline

Anwendungsdemonstration: html5.martineberle.de/off/

3.5 Update des Offline Caches

Hat sich an der Webseite auf dem Webserver etwas geändert, ist ein Update des Caches (Zwischenspeichers) nötig bzw. sinnvoll.

weiterlesen...