Was ist der HTML5-Offline-Cache? Manifest_html5-Tutorial-Fähigkeiten-H5-Tutorial-php.cn

Web-Apps sind nicht besser als PCs. Obwohl Browser über Caching-Mechanismen verfügen, sind sie unter normalen Umständen nicht zwischenspeicherbar. Nach dem Internet ist alles vorbei.

Was ist manifest?

Einfach ausgedrückt ermöglicht Manifest den Zugriff auf Ihre Anwendung auch ohne Netzwerkverbindung.

Es hat drei große Vorteile :

1. Offline-Browsing, normaler Zugriff auch ohne Netzwerk

2. Schnellere Ladegeschwindigkeit, die Geschwindigkeit des zwischengespeicherten lokalen Zugriffs ist natürlich schneller

3. Reduzieren Sie den Serviceanfragedruck. Nachdem die Datei zwischengespeichert wurde, müssen Sie sie nicht erneut anfordern, sondern nur die Dateien, die aktualisiert werden müssen.

Wie benutzt man?

XML/HTML-CodeInhalt in die Zwischenablage kopieren

>
<html manifest="demo. appcache“>
...
html>

Sie müssen das Manifest-Attribut auf jeder Seite der Web-App einfügen, die Sie zwischenspeichern möchten. Wenn eine Seite kein Manifest-Attribut hat, wird sie nicht zwischengespeichert (es sei denn, die Seite ist explizit in der Manifestdatei angegeben). Das heißt, solange die vom Benutzer besuchte Seite das Manifest-Attribut enthält, wird es dem Anwendungscache hinzugefügt. Auf diese Weise ist es nicht erforderlich, in der Manifestdatei anzugeben, welche Seiten zwischengespeichert werden müssen.

Das Manifest-Attribut kann eine absolute URL oder einen relativen Pfad angeben. Eine absolute URL muss jedoch vom selben Ursprung sein wie die Web-App. Eine Manifestdatei kann ein beliebiger Erweiterungsdateityp sein, sie muss jedoch den richtigen MIME-Typ haben, z. B. das Hinzufügen von

in Apache

„AddType text/cache-manifest .appcache“.

Manifestdatei

Manifestdateien sind einfache Textdateien, die dem Browser mitteilen, was zwischengespeichert wird (und was nicht).

Manifestdateien können in drei Teile unterteilt werden:

CACHE MANIFEST – Die unter dieser Überschrift aufgeführten Dateien werden nach dem ersten Download zwischengespeichert.
NETZWERK – in Die Dateien Die unter dieser Überschrift aufgeführten Dateien erfordern eine Verbindung zum Server und werden nicht zwischengespeichert.
FALLBACK - Die unter dieser Überschrift aufgeführten Dateien geben einen Fallback an, wenn die Seite nicht erreichbar ist (z. B. 404). Seite)

Eine vollständige Manifestdatei:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

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

CACHE MANIFEST ist erforderlich, gefolgt von einem Kommentar. Nachfolgend sind die Dateien aufgeführt, die zwischengespeichert werden müssen. NETWORK ist eine Datei, die bei jeder Anfrage geladen werden muss.
Ein Sternchen kann verwendet werden, um anzuzeigen, dass alle anderen Ressourcen/Dateien eine Internetverbindung benötigen:
NETZWERK:
*
FALLBACK ist, wenn eine Internetverbindung vorhanden ist Wenn keine Verbindung hergestellt werden kann, verwenden Sie „404.html“, um alle Dateien im Verzeichnis /html5/ zu ersetzen.

Aktualisierungsmechanismus
Es gibt drei Möglichkeiten, den Manifest-Cache zu aktualisieren:
Der Benutzer löscht den Browser-Cache.
2 ist ein Kommentar (sodass er durch Kommentar geändert werden kann, um die Datei zu aktualisieren)
3. Aktualisierung durch Programm

Cache-Status
Sie können den Cache-Status im Programm über die Eigenschaft window.applicationCache anzeigen.

C/C-CodeInhalt in die Zwischenablage kopieren

var appCache = window.applicationCache;
Schalter (appCache.status) {
case appCache.UNCACHED: // UNCACHED == 0
return ‘UNCACHED’;
Pause;
case appCache.IDLE: // IDLE == 1
zurück ‘IDLE’;
Pause;
case appCache.CHECKING: // CHECKING == 2
zurück ‘PRÜFEN’;
Pause;
case appCache.DOWNLOADING: // DOWNLOADING == 3
zurück ‘HERUNTERLADEN’;
Pause;
case appCache.UPDATEREADY: // UPDATEREADY == 4
zurück ‘UPDATEREADY’;
Pause;
case appCache.OBSOLETE: // OBSOLETE == 5
zurückgeben „VERALTET“;
Pause;
Standard:
Zurück ‘UKNOWN CACHE STATUS‘;
Pause;
};

Um den Cache programmgesteuert zu aktualisieren, rufen Sie zunächst applicationCache.update() auf. Dadurch wird versucht, den Cache des Benutzers zu aktualisieren (wobei die Manifestdatei geändert werden muss). Wenn sich applicationCache.status schließlich im Status UPDATEREADY befindet, rufen Sie applicationCache.swapCache() auf und der alte Cache wird durch den neuen ersetzt.

C/C-CodeInhalt in die Zwischenablage kopieren

var appCache = window.applicationCache;
appCache.update(); // Versuch, den Cache des Benutzers zu aktualisieren
…
if (appCache.status == window.applicationCache.UPDATEREADY) {
appCache.swapCache(); // Der Abruf war erfolgreich, tauschen Sie den neuen Cache ein
}

Hinweis: Wenn Sie update() und swapCache() auf diese Weise verwenden, wird dem Benutzer die aktualisierte Ressource nicht angezeigt. Dadurch kann der Browser einfach prüfen, ob die Manifestdatei aktualisiert wurde, dann den angegebenen Update-Inhalt herunterladen und den App-Cache neu füllen. Damit Benutzer den aktualisierten Inhalt sehen können, sind daher zwei Seitendownloads erforderlich, einer zum Aktualisieren des App-Cache und einer zum Aktualisieren des Seiteninhalts.

Damit Benutzer die neueste Version Ihrer Website sehen können, richten Sie einen Listener ein, der beim Laden der Seite auf das Updateready-Ereignis wartet.

C/C-CodeInhalt in die Zwischenablage kopieren

// Überprüfen Sie, ob beim Laden der Seite ein neuer Cache verfügbar ist.
window.addEventListener(‘load’, function(e) {
window.applicationCache.addEventListener(‘updateready’, function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
// Browser hat einen neuen App-Cache heruntergeladen
// Tauschen Sie es ein und laden Sie die Seite neu, um die neue Schärfe zu erhalten.
window.applicationCache.swapCache();
window.location.reload();
} else {
// Manifest hat sich nicht geändert
}
}, false);
falsch);

Ereignisse abhören und unterschiedliche Zustände entsprechend behandeln:

C/C-CodeInhalt in die Zwischenablage kopieren

var appCache = window.applicationCache;
// Wird nach dem ersten Cache des Manifests ausgelöst
appCache.addEventListener(‘cached’, handleCacheEvent, false);
// Es wird immer nach einem Update gesucht
false);
// Ein Update wurde gefunden. Der Browser ruft Ressourcen ab.
false);
// Das Manifest gibt 404 oder 410 zurück, der Download ist fehlgeschlagen,
// oder das Manifest hat sich während des Downloads geändert
false);
// Wird nach dem ersten Download des Manifests ausgelöst
false);
// Wird ausgelöst, wenn die Manifestdatei 404 oder 410 zurückgibt.
// Dies führt dazu, dass der Anwendungscache gelöscht wird
false);
// Wird für jede im Manifest aufgeführte Ressource ausgelöst, während sie abgerufen wird
false);
// Wird ausgelöst, wenn die Manifestressourcen neu heruntergeladen wurden
false);

Wenn der Download der Manifestdatei oder einer in der Datei angegebenen Ressource fehlschlägt, schlägt das gesamte Update fehl. In diesem Fall versucht der Browser weiterhin den alten Anwendungscache.

Hinweis:

1. Die Kapazitätsgrenze des Offline-Speichers der Site beträgt 5 MB.
2 Wenn die Manifestdatei oder eine intern aufgeführte Datei nicht normal heruntergeladen werden kann, wird der gesamte Aktualisierungsvorgang als Fehler betrachtet und der Browser wird fortgesetzt Um den alten Cache zu verwenden
3. Der HTML-Code, der auf das Manifest verweist, muss denselben Ursprung wie die Manifestdatei haben und sich in derselben Domäne befinden
4 Der im Manifest verwendete relative Pfad ist das Manifest Datei
5. Die CACHE-MANIFEST-Zeichenfolge sollte in der ersten Zeile stehen und erforderlich sein
6. Das System speichert automatisch die HTML-Datei, die auf die Manifestdatei verweist.
Der CACHE in der Manifestdatei enthält nichts Wenn es sich um eine implizite Deklaration handelt, muss sie in Front
8 liegen. Die Ressourcen in FALLBACK müssen denselben Ursprung haben wie die Manifestdatei
9 zwischengespeichert wird, fordert der Browser direkt den absoluten Pfad an und greift auch auf die Ressource im Cache zu.
10. Auch wenn das Manifest-Attribut nicht für andere Seiten auf der Site festgelegt ist, wird auf die angeforderte Ressource aus dem Cache zugegriffen, wenn sie sich im Cache befindet.
11 Wenn sich die Manifestdatei ändert, wird die Ressourcenanforderung selbst geändert löst ein Update aus

Das Obige ist eine Einführung in den relevanten Inhalt des HTML5-Offline-Caching-Manifests. Ich hoffe, es wird für das Lernen aller hilfreich sein.

Originaltext: http://www.cnblogs.com/hutuzhu/p/4871666.html