Anzeige
Anzeige
Ratgeber
Artikel merken

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.

Von Denis Potschien
3 Min. Lesezeit
Anzeige
Anzeige

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.

Anzeige
Anzeige

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:

Anzeige
Anzeige
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.

Anzeige
Anzeige

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:

Anzeige
Anzeige
<?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.

Anzeige
Anzeige

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:

Anzeige
Anzeige
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.

Anzeige
Anzeige

Was haltet ihr vom Application Cache? Setzt ihr diese Möglichkeiten ein – wenn ja, wofür?

Weiterführende Links zum Thema HTML5:

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
11 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Klugsche**er

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

Antworten
Denis Potschien

Danke für den Hinweis – ist korrigiert.

Antworten
Hans

Moin!

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

Antworten
Matze

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

Antworten
Micha aus Berlin

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

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
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
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
Abbrechen

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

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige