Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

HTML5-Websites offline nutzen mit Application Cache

Viele Neuerungen, die HTML5 und CSS3 mit sich bringen, sind vor allem interessant für Webapplikationen und mobile Geräte. Insbesondere die Möglichkeit, Seiten auch offline verfügbar zu machen, ist für Anwendungen von großem Vorteil, die auch auf Mobilgeräten laufen sollen. Mit HTML5 gibt es – dank Application Cache – genau diese Möglichkeit.

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:

Finde einen Job, den du liebst

Bitte beachte unsere Community-Richtlinien

8 Reaktionen
René Schubert

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. ;)

Antworten
Martin

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!

Antworten
Locke

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

Antworten
Micha aus Berlin

Toller Artikel. Hilft, da ich gerade meine erste offline app bastel. @Matze, ist die Frage ernst gemeint?

Antworten
Matze

Hi, wie kann ich denn HTML5herunterladen, würde es gerne mal installieren.

Antworten
Hans

Moin!

Guter Artikel, in den Code-Snippets jedoch auch der Fehler mit dem "CAHCHE" statt "CACHE". LG!

Antworten
Denis Potschien

Danke für den Hinweis - ist korrigiert.

Antworten
Klugsche**er

In der Headline sollte es auch "Cache" heißen anstelle des "Chache" :-)

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen