HTML5 Anwendungscache

Mit der Anwendungscache können Sie durch Erstellen eines Cache-Manifest-Datei einfach eine Offline-Version von Web-Anwendungen erstellen.

Was ist die Anwendungscache?

HTML5 hat die Anwendungscache (Application Cache) eingeführt, was bedeutet, dass Web-Anwendungen cached werden und ohne Internetverbindung zugänglich sind.

Drei Vorteile bringt die Anwendungscache für Anwendungen mit:

  1. Offline-Browsing - Benutzer können sie auch im Anwendungsausstand verwenden
  2. Geschwindigkeit - Cachede Ressourcen werden schneller geladen
  3. Verringern Sie die Serverlast - Der Browser lädt nur aktualisierte oder geänderte Ressourcen vom Server herunter

Browser-Unterstützung

Die Zahlen in der Tabelle weisen auf die erste Browser-Version hin, die den Anwendungscache vollständig unterstützt.

API
Anwendungscache 4.0 10.0 3.5 4.0 11.5

HTML Cache Manifest Beispiel

Das folgende Beispiel zeigt ein HTML-Dokument mit Cache Manifest (für Offline-Browsing):

Beispiel

!DOCTYPE HTML
<html manifest="demo.appcache">
<body>
Dokumentinhalte ...
</body>
</html>

Versuchen Sie es selbst

Cache Manifest Grundlagen

Um die Anwendungscache zu aktivieren, fügen Sie das Manifest-Attribut im <html>-Tag des Dokuments hinzu:

!DOCTYPE HTML
<html manifest="demo.appcache">
...
</html>

Jede Seite, die ein Manifest hat, wird beim Zugriff des Benutzers immer im Cache gespeichert. Wenn keine Manifest-Attribut angegeben ist, wird die Seite nicht im Cache gespeichert (es sei denn, die Seite wird direkt im Manifest-Datei angegeben).

Die empfohlene Dateierweiterung für das Manifest-Datei ist: ".appcache".

Hinweis:Das Manifest-Datei muss die richtige MIME-Type, d.h. "text/cache-manifest", haben. Es muss auf dem Webserver konfiguriert werden.

Manifest-Datei

Das Manifest-Datei ist eine einfache Textdatei, die dem Browser mitteilt, welche Inhalte im Cache gespeichert werden (und welche nicht).

Das Manifest-Datei hat drei Teile:

  • CACHE MANIFEST - In diesem Titel aufgeführte Dateien werden nach dem ersten Herunterladen im Cache gespeichert
  • NETWORK - In diesem Titel aufgeführte Dateien benötigen eine Verbindung zum Server und werden nicht im Cache gespeichert
  • FALLBACK - In diesem Titel aufgeführte Dateien legen die Ersatzseiten fest, die bei nicht zugänglichen Seiten (z.B. 404-Seiten) verwendet werden

CACHE MANIFEST

Die erste Zeile, CACHE MANIFEST, ist obligatorisch:

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

Der obige Manifest-Datei listet drei Ressourcen auf: eine CSS-Datei, ein GIF-Bild und eine JavaScript-Datei. Wenn das Manifest geladen wird, lädt der Browser diese drei Dateien aus dem Stammverzeichnis der Website herunter. Dann sind diese Ressourcen immer noch verfügbar, wenn der Benutzer mit dem Internet verbunden ist.

NETWORK

Die folgende NETWORK-Sektion legt fest, dass die Datei "login.php" niemals im Cache gespeichert wird und offline nicht verfügbar ist:

NETWORK:
login.asp

Man kann ein Sternchen verwenden, um anzuzeigen, dass alle anderen Ressourcen/Dateien eine Internetverbindung benötigen:

NETWORK:
*
FALLBACK

Der FALLBACK-Bereich unten legt fest, dass alle Dateien im Verzeichnis /html/ durch "offline.html" ersetzt werden, wenn keine Internetverbindung hergestellt werden kann:

FALLBACK:
/html/ /offline.html

Anmerkung:Der erste URI ist die Ressource, der zweite der Ersatzressource.

Aktualisierung des Caches

Sobald eine Anwendung zwischengespeichert wird, bleibt sie zwischengespeichert, bis eine der folgenden Bedingungen eintritt:

  • Der Benutzer leert den Browser-Cache
  • Die Manifest-Datei wurde geändert (siehe untenstehende Tipps)
  • Der Cache der Anwendung wird durch das Programm aktualisiert

Beispiel - Komplette Cache Manifest Datei

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html/ /offline.html

Tipp:Zeilen, die mit "#" beginnen, sind Anmerkungszeilen, können aber auch anderen Zwecken dienen. Der Cache wird nur aktualisiert, wenn die Manifest-Datei geändert wird. Wenn Sie ein Bild bearbeiten oder eine JavaScript-Funktion ändern, werden diese Änderungen nicht neu zwischengespeichert. Eine Aktualisierung des Datums und der Versionsnummer in den Anmerkungszeilen ist eine Methode, um sicherzustellen, dass der Browser die Dateien neu zwischenspeichert.

Hinweise zur Anwendung des Caches

Bitte beachten Sie den Inhalt des Caches.

Sobald eine Datei zwischengespeichert wird, zeigt der Browser weiterhin die zwischengespeicherte Version an, selbst wenn Sie die Datei auf dem Server geändert haben. Um sicherzustellen, dass der Browser den Cache aktualisiert, müssen Sie die Manifest-Datei aktualisieren.

Anmerkung:Die Kapazitätsbegrenzungen für zwischengespeicherte Daten der Browser können unterschiedlich sein (bei einigen Browsern ist die Begrenzung pro Site 5MB).