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 zwischengespeichert und ohne Internetverbindung aufgerufen werden können.

Die Anwendungscache bringt drei Vorteile für die Anwendung mit:

  1. Offline-Browsing - Benutzer können sie verwenden, wenn die Anwendung offline ist
  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 im Cache gespeichert, wenn der Benutzer darauf zugreift. Wenn das Manifest-Attribut nicht 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 haben, nämlich "text/cache-manifest" und 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 - Unter diesem Titel aufgelistete Dateien werden nach dem ersten Herunterladen im Cache gespeichert
  • NETWORK - Unter diesem Titel aufgelistete Dateien benötigen eine Verbindung zum Server und werden nicht im Cache gespeichert
  • FALLBACK - Unter diesem Titel aufgelistete Dateien bestimmen die Ersatzseiten, wenn die Seite nicht erreicht werden kann (z.B. 404-Seite)

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 Wurzelverzeichnis der Website herunter. Dann sind diese Ressourcen immer noch verfügbar, wenn der Benutzer mit dem Internet getrennt ist.

NETWORK

Das NETWORK-Teil der Vorschrift 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 anzugeben, dass alle anderen Ressourcen/Dateien eine Internetverbindung benötigen:

NETWORK:
*
FALLBACK

Der FALLBACK-Bereich unten gibt an, 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 ist der Ersatzteil.

Cache aktualisieren

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

  • Benutzer leeren den Browser-Cache
  • Manifestdatei wurde geändert (siehe untenstehende Tipps)
  • Anwendungscache durch das Programm aktualisieren

Beispiel - Komplettes 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 der Anwendung wird nur aktualisiert, wenn sich die Manifestdatei ändert. 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.

Beachtungen bezüglich der Anwendungscaches

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 Manifestdatei aktualisieren.

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