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 Application Cache: Inhalte offline verfügbar machen

Mit der HTML5 Application Cache Schnittstelle kann man Website-Inhalte wie z.B. Bilder oder JavaScript als Kopie lokal auf dem Client-Gerät speichern, um sie so später ohne Internetverbindung nutzen zu können. In einem Tutorial bei Developer Drive wird Schritt für Schritt erklärt, wie man ein über das Canvas-Element gezeichnetes Bild samt JavaScript für Offline-Nutzung verfügbar macht. Wir fassen das Tutorial kurz für euch zusammen.

HTML5 Application Cache für Offline-Inhalte ohne Internet

Anwendungsspeicher im Browser mit Cache-Manifest

Das Tutorial bei Developer Drive zum HTML5 Application Cache startet mit normalem HTML5-Markup, das ein Canvas-Element mit Bild enthält:

HTML5 Markup mit Canvas-Element und Bild

Danach wird ein separates JavaScript eingebunden, das dafür sorgt, auf dem Canvas-Element zu zeichnen:

JavaScript-Einbindung für das Zeichnen auf dem Canvas-Element

Um den Application Cache für eine Website zu aktivieren, wird eine einfache Textdatei als Manifest-Datei erstellt. Im Manifest wird definiert, welche Dateien offline gespeichert werden sollen:

Manifest-Datei für HTML5 Application Cache

Über das Manifestattribut beim HTML-Tag wird der Anwendungscache für die Website aktiviert. Im Markup muss dafür der Name der erstellten Manifest-Datei verwendet werden:

HTML-Attribut "manifest" für die Aktivierung des Application Caches in HTML5

Damit der Application Cache mit HTML5 korrekt funktioniert, muss als letztes noch der zugehörige MIME-Type für die Manifest-Datei auf dem Webserver definiert werden. Für den Apache-Server kann das z.B. in einer .htaccess Datei passieren. Wenn die folgende Zeile in der .htaccess Datei ergänzt wird, versteht der Webserver alle Dateien mit der Endung .appcache als Application Cache Manifeste:

MIME-Type für das Application Cache Manifest auf dem Webserver definieren

Beim ersten Aufruf der Website your_page.html werden nun das im Manifest aufgelistete JavaScript und die zugehörige Bilddatei für spätere Offline-Nutzung im App-Cache clientseitig gespeichert. Wer das Beispiel selbst testen möchte, findet den vollständigen, externen JavaScript-Code und weitere Einzelheiten zum HTML5 Application Cache Tutorial im Originalartikel bei Developer Drive.

Die neue HTML5 Application Cache Schnittstelle bringt einige Vorteile für Websites und -anwendungen, wie Offline-Surfen, Geschwindigkeitsverbesserung oder geringere Serverlast.

Allerdings wird die HTML5 Application Schnittstelle vom aktuellen Internet Explorer in Version 9 noch nicht unterstützt. Für den IE 10, der mit Windows 8 ausgeliefert wird, wurde bei MSDN angekündigt, dass er etwas mit der Application Cache Schnittstelle anfangen kann.

Etwas gewöhnungsbedürftig ist auch, dass die offline gespeicherte Website-Version vom Browser als Standard verwendet wird. So kann es zu Verwirrungen kommen, da Website-Inhalte erst beim Leeren des Browser-Caches oder Änderungen an der Manifest-Datei aktualisiert werden

Was haltet ihr vom HTML5 Application Cache ? Habt ihr die Schnittstelle schon genutzt für Offline-Inhalte?

Weiterführende Links:

Bildnachweis für die Newsübersicht: aka tigeon, noil / flickr.com, Lizenz: CC-BY

Bitte beachte unsere Community-Richtlinien

Eine Reaktion
Viktor

Jau, schon vor einiger Zeit.

Die Telekom setzt dann gerne die IP-Adresse 1.2.3.12 dazwischen und dann bringt der Cache auch nichts mehr...

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Finde einen Job, den du liebst