Das Prinzip hinter Application Cache ist recht simpel. Über eine Manifest-Datei werden alle Dateien angegeben, die offline gespeichert werden sollen. Beim erstmaligen Aufrufen einer HTML-Seite, die eine Manifest-Datei beinhaltet, werden diese Dateien heruntergeladen und somit offline verfügbar gemacht.
Im Unterschied zum normalen Browser-Cache bleiben die über die Manifest-Datei definierten Dateien dauerhaft offline gespeichert und werden vorrangig geladen. Sind diese Dateien also einmal heruntergeladen worden, ist eine Internetverbindung nicht mehr notwendig. Erst wenn sich die im Manifest definierten Dateien ändern und eine Internetverbindung zur Verfügung steht, werden die aktuellen Dateien heruntergeladen.
Manifest-Datei anlegen und einbinden
Die Manifest-Datei ist eine einfache Textdatei, die eine Liste aller Dateien beinhaltet, die für den Offlinebetrieb heruntergeladen werden sollen:
CAHCHE MANIFEST bild1.png bild2.png style.css anwendung.js
Eingeleitet wird die Manifest-Datei immer mit „CACHE MANIFEST“. Es folgen jene Dateien, die heruntergeladen werden sollen. Die Dateien werden nicht im normalen Browser-Cache abgelegt, sondern in einem gesonderten Offline-Cache.
Die Manifest-Datei muss anschließend in der HTML-Datei der Seite, die für den Offlinebetrieb verfügbar gemacht werden soll, eingebunden werden. Dies geschieht über das HTML-Element:
<html manifest="manifest.cache">
Die Dateiendung der Manifest-Datei ist nicht bedeutend. Wichtig ist allerdings, dass die Manifest-Datei den MIME-Typ „text/cache-manifest“ besitzt. Der Typ lässt sich per „.htaccess“-Datei festlegen oder – falls die Manifest-Datei eine PHP-Datei ist – auch so:
<?php
header("Content-Type: text/cache-manifest");
?>
Ohne die Angabe des Typs wird die Manifest-Datei vom Browser nicht erkannt. Die HTML-Seite selbst braucht im Manifest nicht erwähnt zu werden. Sie wird standardmäßig immer mit heruntergeladen. Für jedes HTML-Dokument, das Teil des Application Caches werden soll, muss die Manifest-Datei eingebunden werden.
Die im Manifest definierten Dateien müssen in Relation zum Speicherort der Manifest-Datei referenziert werden.
Funktionsweise des Application Caches
Wird die HTML-Datei erstmals im Browser aufgerufen, werden alle zu cachenden Dateien – inklusive der HTML-Datei selbst – heruntergeladen und im Offline-Cache abgelegt. Wird die Seite erneut aufgerufen – unabhängig davon, ob der Browser on- oder offline ist – werden die im Manifest definierten Dateien nur noch aus dem Offline-Cache abgerufen und nicht mehr aus dem Internet.
Erst wenn es Änderungen in der Manifest-Datei gibt, findet eine Aktualisierung der Dateien statt. Das heißt auch, dass Änderungen an eingebundenen Dateien erst dann im Browser zur Verfügung stehen, wenn die Manifest-Datei geändert wurde. Für den Fall, dass sich die Auflistung der Dateien im Manifest nicht ändert, sondern nur der Inhalt der eingebundenen Dateien, muss im Manifest irgendeine Änderung gemacht werden, damit der Browser die Dateien aktualisiert. Dafür reicht es beispielsweise, im Manifest ein Kommentar mit dem Änderungsdatum zu hinterlegen:
CAHCHE MANIFEST # aktualisiert am 07.03.2012 /bild1.png /bild2.png /style.css /anwendung.js
Differenzierung der Dateien im Manifest
In der Manifest-Datei lassen sich nicht nur die Dateien definieren, die im Offline-Cache gespeichert werden sollen. Es lassen sich auch explizit jene Dateien angeben, die immer aus dem Internet heruntergeladen werden sollen:
CAHCHE MANIFEST /bild1.png /bild2.png /style.css /anwendung.js NETWORK: /aktuelles.js
Darüber hinaus lassen sich auch Fallback-Dateien definieren. Diese Dateien werden für den Offlinebetrieb heruntergeladen, aber nur dann aufgerufen, wenn die dazugehörige Online-Datei nicht verfügbar ist, da der Browser sich im Offlinebetrieb befindet:
CAHCHE MANIFEST /bild1.png /bild2.png /style.css /anwendung.js FALLBACK: /online.png /offline.png
Im Beispiel wird immer versucht, die Datei „online.png“ aufzurufen. Diese wird jedoch nicht im Offline-Cache abgelegt, sondern ist nur im Internet verfügbar. Die Alternative „offline.png“ wird hingegen heruntergeladen, aber nur dann anstelle von „online.png“ aufgerufen, wenn der Browser offline ist.
Besonderheit beim Firefox
Während der Application Cache bei Webkit-Browsern gut funktioniert, gibt es beim Firefox Probleme, da die Manifest-Datei und das HTML-Dokument nicht ständig auf neue Online-Versionen geprüft werden. Hierfür ist es nötig, über den Header die Werte für „Cache-Control“ und „Expires“ zu ändern, sodass diese vom Browser im Onlinebetrieb immer aktualisiert werden können. Per PHP sieht das so aus:
<?php
header("Cache-Control: no-cache, must-revalidate");
header("Expires: ".date(DATE_RFC1123));
?>
Mit dieser Anpassung gibt es auch beim Firefox keine Probleme. Eine weitere Besonderheit im Firefox gibt es noch: Anders als bei Webkit-Browsern fragt Firefox beim erstmaligen Besuch einer zu cachenden Seite, ob diese für den Offlinebetrieb heruntergeladen werden soll. Dies muss einmalig pro Website bestätigt werden.
Was haltet ihr vom Application Cache? Setzt ihr diese Möglichkeiten ein – wenn ja, wofür?
Weiterführende Links zum Thema HTML5:
- HTML5: Browser-Kontextmenü um eigene Menüpunkte erweitern
- HTML5 Video: 18 Player für Websites und Blogs
- HTML5 Please! Alle Features im Überblick
- HTML5: Pflichtfelder und Eingabevorgaben für Formulare festlegen
- HTML5: Sandbox-Modus für IFrames
von Klugsche**er 07.03.2012 (16:40Uhr) 1.
In der Headline sollte es auch "Cache" heißen anstelle des "Chache" :-)
von denis.potschien 07.03.2012 (16:43Uhr) 2.
Danke für den Hinweis - ist korrigiert.
von Hans 07.03.2012 (17:03Uhr) 3.
Moin!
Guter Artikel, in den Code-Snippets jedoch auch der Fehler mit dem "CAHCHE" statt "CACHE". LG!
von Matze 07.03.2012 (17:44Uhr) 4.
Hi, wie kann ich denn HTML5herunterladen, würde es gerne mal installieren.
von Micha aus Berlin 07.03.2012 (18:46Uhr) 5.
Toller Artikel. Hilft, da ich gerade meine erste offline app bastel. @Matze, ist die Frage ernst gemeint?
von Locke 07.03.2012 (19:36Uhr) 6.
Hey, Super Artikel - werde ich gleich mal in meinen Projekten ausprobieren.
@Matze sorry aber schau dir den Link mal an Hier bekommst du HTML5 Hilfe
von Martin 08.03.2012 (16:48Uhr) 7.
Hy, habe es auch ausprobiert und was soll ich sagen manschmal funktioniert sogar alles :-)!
Das Problem ist im Safari geht alles ohne Probleme nur wenn ich es als webapp auf iPad mache dann geht manschmal alles gut und manschmal wird die Internet Verb. Verlangt und manschmal werden nicht alle Bilder geladen!
von [KW10/12] Themen der Woche » IT::f… 12.03.2012 (08:24Uhr) 8.
[...] Mit HTML5 lassen sich bekanntlich Applikationen in gewissen Grenzen offlinefähig machen. t3n hat dazu eine kurze Einführung. [...]
von HTML5: So sparst du Quelltext und bleibs… 13.03.2012 (09:00Uhr) 9.
[...] HTML5-Websites offline nutzen mit Application Cache [...]
von René Schubert 14.03.2012 (08:30Uhr) 10.
Schade, dass es keine Möglichkeit gibt, den Typ der Textdatei über ein Attribut zu definierten, wie z.B. beim link- oder script-Tag.
Mit einen Beispiel für die Typ-Definition per .htaccess wäre der Artikel fast perfekt. ;)
von HTML5 Application Cache: Inhalte offline… 29.05.2012 (14:08Uhr) 11.
[...] HTML5-Websites offline nutzen mit Application Cache – t3n News [...]