HTML5 Grund教程

HTML5 API

HTML5 Medien

HTML5 Grafik

HTML5 Web Workers HTML 5 lokale Datenbank

HTML5 Anwendungskache

Verwendung von HTML5, Durch die Erstellung eines Cache Manifest Datei, kann man die Offline-Version einer Webanwendung leicht erstellen, durch die Anwendungskache wird bedeutet, dass die Webanwendung Client-Caching durchführen kann und ohne Netzwerkverbindung offline zugänglich ist.

Was ist die Anwendungskache (Application Cache)?

HTML5 Eine Anwendungskache-Mechanismus bietet, der es web-basierten Anwendungen ermöglicht, offline zu arbeiten. Entwickler können die Application Cache (AppCache)-Schnittstelle verwenden, um die von der Browser zu speichernden Ressourcen zu definieren und den Offline-Nutzern zugänglich zu machen. Im Offline-Modus lädt und arbeitet die Anwendung auch dann normal, wenn der Benutzer auf den REFRESH-Button klickt.

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

Offline-Browsing - Der Benutzer kann sie auch im Offline-Modus verwenden
Geschwindigkeit - Laden von bereits gespeicherten Ressourcen schneller
Server-Last reduzieren - Der Browser lädt nur aktualisierte oder geänderte Ressourcen vom Server herunter.

Welche Browser unterstützen ihn?

Internet Explorer 10, Firefox, Chrome, Safari und Opera unterstützen App-Cache.

HTML5 　Cache Manifest Beispiel

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

Online-Beispiel

Beispiel

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

Testen Sie es heraus ‹/›

Grundlagen des Cache Manifest

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 spezifiziert, wird vom Benutzer gecacht, wenn darauf zugegriffen wird. Wenn keine Manifest-Attribut spezifiziert wird, wird die Seite nicht gecacht (es sei denn, die Seite wird direkt im Manifest-Datei spezifiziert)

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

Bitte beachten Sie, dass das Manifest-Datei die richtige MIME-Konfiguration erfordert-type, d.h. "text/cache-"manifest". Diese muss auf dem Webserver konfiguriert werden.

Manifest-Datei

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

Das Manifest-Datei kann in drei Teile unterteilt werden:

CACHE MANIFEST - Die Dateien, die unter diesem Titel aufgelistet sind, werden nach dem ersten Download gecacht
NETWORK - Die Dateien, die unter diesem Titel aufgelistet sind, benötigen eine Verbindung zum Server und werden nicht gecacht
FALLBACK - Die Dateien, die unter diesem Titel aufgelistet sind, regeln den Fallback-Page, falls die Seite nicht erreicht werden kann (z.B. 404 Seite)

CACHE MANIFEST

Die erste Zeile, CACHE MANIFEST, ist obligatorisch:

CACHE MANIFEST
/style.css
/logo.png
/main.js

Das obige Manifest enthält drei Ressourcen: eine CSS-Datei, ein GIF-Bild und eine JavaScript-Datei. Nachdem das Manifest geladen wurde, lädt der Browser diese drei Dateien aus dem Wurzelverzeichnis der Website. Diese Ressourcen bleiben auch verfügbar, wenn der Benutzer jederzeit die Verbindung zum Netzwerk trennt.

NETWORK

Der nachfolgende Abschnitt NETWORK legt fest, dass die Datei "login.php" niemals gecacht wird und nicht im Offline-Modus verfügbar ist:

NETWORK:
login.php

Man kann das Sternchen (*) verwenden, um alle anderen Ressourcen anzuzeigen/Dateien benötigen eine Netzwerkverbindung:

NETWORK:
*FALLBACK

Der nachfolgende Abschnitt FALLBACK legt fest, dass "offline.html" verwendet wird, wenn keine Netzwerkverbindung hergestellt werden kann: /html5/ Alle Dateien im Verzeichnis:

FALLBACK:
/html/　/index.html

Hinweis: Der erste URI ist die Ressource, der zweite ist der Ersatzuri.

Cache aktualisieren

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

Der Benutzer leert den Browser-Cache
Das Manifest wurde geändert (siehe unten)
Das Manifest-Cache durch das Programm aktualisieren

Beispiel eines vollständigen Manifest-Datei

CACHE MANIFEST
#　2018-02-21　v1.1.1
/style.css
/logo.png
/main.js
NETWORK:
login.php
FALLBACK:
/html/　/index.html

Hinweis:Zeilen, die mit "#" beginnen, sind Anmerkungszeilen, können aber auch anderen Zwecken dienen. Der Cache der Anwendung wird aktualisiert, wenn die Manifestdatei 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 Anwendungscache

Bitte beachten Sie den Inhalt des Caches.

Sobald eine Datei zwischengespeichert wurde, zeigt der Browser weiterhin die gespeicherte 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.

Hinweis: Die Kapazitätsbegrenzung für zwischengespeicherte Daten kann zwischen Browsern variieren (manche Browser haben eine Begrenzung pro Seite) 5MB).