Wie zu verwenden/erstellen Sie ein MANIFEST, Griff appCache-Ereignissen/Fehlern und die Verwendung von swapCache

Wie verwenden Sie und erstellen Sie eine MANIFEST-Datei (Struktur),

Griff appCache-Ereignisse und-Fehler,

und Wann ist swapCache benötigt?

InformationsquelleAutor Aleksander Azizi | 2013-11-18

43

Verwenden Sie Den Anwendungs-Cache Mit MANIFESTEN

Verwenden Anwendungs-cache müssen Sie die Referenz auf das manifest-Datei im HTML-Dokument, wie diese:
```
<html manifest="manifest.appcache"/>
```
Die manifest-Datei selbst muss einem vorgegebenen layout zu arbeiten.

CACHE MANIFEST ist obligatorisch und muss an der Oberseite (so dass, wenn der browser überprüft, ob es einen cache-manifest, es gibt true zurück).

CACHE ist optional, aber empfohlen, und für die Bezugnahme auf die Dateien, die Sie lokal zwischengespeichert.

FALLBACK ist optional und wird verwendet, um anzugeben, Datei(en) verwendet werden soll, wenn die angegebene (in CAHCE) nicht verfügbar ist. Die erste Datei angegeben (im FALLBACK) ist die original-Datei, und die zweite Datei ist die eine, die verwendet wird, wenn die ursprüngliche Datei nicht verfügbar ist.

NETWORK sollte als obligatorisch angesehen werden, ist es aber nicht. Es wird verwendet, um anzugeben welche Dateien muss eine internet-Verbindung (nicht gecacht). Mit "*" (ohne die Klammern) gibt an, dass alle anderen Dateien außer den vorgenannten CACHE, muss eine aktive internet-Verbindung.

Beispiel:
```
CACHE MANIFEST

CACHE:
YourFirstFile.html
YourSecondFile.png
fallbackFile1.html
fallbackFile2.png
Etc.css

FALLBACK:
YourFirstFile.html fallbackFile1.html
YourSecondFile.png fallbackFile2.png

NETWORK:
*
```
Manifest (und die angegebenen Ressourcen) wird nur aktiviert, beim laden der Seite (wenn der Benutzer die Website).
Anmerkung: Die manifest-Datei ist groß-und Kleinschreibung.

Behandlung von Ereignissen ausgelöst, die in den Anwendungs-cache

Das erste, was ich sagen will, ist appCache ist wirklich window.applicationCache, damit es deklariert werden muss (var appCache = window.applicationCache;).

Wenn ein Benutzer die Website zum ersten mal (oder die manifest-cache nicht vorhanden ist), werden die folgenden Ereignisse ausgelöst werden; wenn alles funktioniert, wie es soll:

Erstellen von Anwendungs-Cache mit MANIFESTEN

Anwendungs-Cache Überprüfen

Application Cache Download

Anwendung Cache-Progress (0 X)

Application Cache Zwischengespeichert

Let ' s break it down.

Den ersten (Creating Application Cache) gibt einen cache "Datei/Ordner" für den browser zu einem späteren Zeitpunkt verwenden.

Zweiten (Application Cache Checking) "checking", sieht im manifest-Datei, um zu sehen, was es braucht, um den cache.

Dritten (Application Cache Downloading) "downloading", beginnt der download-Prozess Dateien, die im manifest festgelegt.

Vierten (Application Cache Progress) "progress", verfolgt die Spuren der Download-Fortschritt (dieser wird ausgelöst, für jede Datei).

Fünften (Application Cache Cached) "cached", sagt einfach "ich bin fertig" Zwischenspeichern der Dateien, und alles ging wie es sollte.

Was bedeutet das? Es bedeutet, dass wir eine gewisse Kontrolle über die Ereignisse und können Auslöser unserer eigenen Veranstaltungen, wenn wir möchten.

Also durch das hören der progress Fall können wir eine Statusleiste angezeigt, eine Benachrichtigung mit den Schritten oder wirklich, was wir wollen.
```
appCache.addEventListener("progress", function(event) {
    console.log(event.loaded + " of " + event.total);
}, false);
```
Warten Sie, was hab ich nur tun?

Fügte ich ein event listener mit einem anonyme Funktion. In dieser Funktion gebe ich auf ein "event", von dem, was wir hören (downloading), und einfach logged wie viele Dateien zwischengespeichert wurden bisher und wie viele Dateien sind es insgesamt.

Lassen Sie uns tun dies auf alle Ereignisse erwähnt, von der ersten genannten Veranstaltung, zu der letzten:
```
appCache.addEventListener("checking", function(event) {
    console.log("Checking for updates.");
}, false);


appCache.addEventListener("downloading", function(event) {
    console.log("Started Download.");
}, false);


appCache.addEventListener("progress", function(event) {
    console.log(event.loaded + " of " + event.total + " downloaded.");
}, false);

appCache.addEventListener("cached", function(event) {
    console.log("Done.");
}, false);
```
Nun diese Ereignisse tun, was ich will.

Diese sind die appCache-Veranstaltungen:

checking - Immer das erste Ereignis ausgelöst. Prüfungen für ein update in der manifest.

downloading - Ausgelöst, wenn ein update gefunden wird. Downloads Ressourcen, die im manifest festgelegt.

progress - Ausgelöst für jede Ressource, die aktuell herunterladen. Spuren der Bearbeitung (durch die Datei).

error - Ausgelöst, wenn 404, 410 Netzwerk-Fehler Auftritt, oder die manifest-Datei geändert wurde, während das herunterladen.

obsolete - Ausgelöst, wenn 404, 410 Netzwerk-Fehler Auftritt, oder die manifest-Datei nicht vorhanden (auf dem server). Beachten Sie, dass diese Veranstaltung löschen Sie frühere (und aktuelle) Anwendung cache.

cached - (Nur) Ausgelöst, die erste Zeit werden die Ressourcen angegeben, die in dem manifest-Cache.

noupdate - Ausgelöst, wenn keine änderung vorgenommen wurde, die das manifest seit der letzten cache-Aktualisierung.

updateready Ausgelöst werden, wenn neue Ressourcen heruntergeladen werden.

Szenario handling (Fehler(N), Ereignisse und Trigger)

Was ist, wenn etwas schief geht? Wir können damit umgehen, dass mit error - und/oder obsolete.

error wird ausgelöst, wenn etwas schief geht während der Aktualisierung.

z.B.
- Eine Datei angegeben, die im manifest nicht auf dem server vorhanden ist.
- Das manifest geändert wird, während herunterladen.
obsolete wird ausgelöst, wenn die manifest-Datei nicht vorhanden (auf dem server).

z.B.
- Die manifest-Datei wird vom server gelöscht.
- Die website verweist auf eine ungültige url/Pfad (<html manifest="manifest.appcache"/>).
Durch das hören auf error können wir, zum Beispiel, dem Benutzer mitteilen, wenn etwas schief geht:
```
appCache.addEventListener("error", function(event) {
    if (navigator.onLine == true) { //If the user is connected to the internet.
        alert("Error - Please contact the website administrator if this problem consists.");
    } else {
        alert("You aren't connected to the internet. Some things might not be available.");
    }
}, false);
```
Hier ich habe überprüft, ob der Nutzer eine aktive Internetverbindung haben oder nicht. Beachten Sie, dass das ist nur ein Beispiel, sagen, wird der Benutzer möglicherweise nicht notwendig sein (je nach website).

Können wir tun die gleiche Sache mit obsolete, aber wir werden vielleicht nicht wollen, zu sagen, die user über Sie, da dies ein server-Seite-problem:
```
appCache.addEventListener("obsolete", function(event) {
    console.log("Obsolete - no resources are cached, and previous cache(s) are now deleted.");
}, false);
```
swapCache

Nun, dies ist eine knifflige Sache. Die wichtigsten Fragen über swapCache ist; "Was tut es?", "Ist es sinnvoll/nötig?" und "Sollte es verwendet werden?".

swapCache wird verwendet, um die alten zu ersetzen-cache mit der neuen ein. Es kann nur verwendet werden, innerhalb der updateready event (wenn an anderer Stelle verwendet, wird es Reminiszenz Fehler).

"Was tut es?": swapCache tut, was es sagt, tauscht die aktuellen cache mit einem neuen.

"Ist es sinnvoll/nötig?": appCache sinnvoll ist, der Hauptgrund, Sie zu verwenden, wäre es um sicherzustellen, dass die newsiest cache verfügbar ist, verwendet. Obwohl dies scheint wie eine Sache, die sollte von selbst arbeiten, das ist nicht immer der Fall. Zum Beispiel, einige Browser nicht verwenden Sie immer die neueste cache, als noch nicht die Mitteilung bekommen, dass es (das iPhone ist ein gutes Beispiel ). Ein Bild kann auch zwischengespeichert werden, dann gelöscht/umbenannt, dann zwischengespeichert, und so weiter. Am Ende, der browser eventuell verwenden Sie eine alte cache angezeigt, das Bild, da die Referenz, die es bereits mit den gespeicherten caches(s). Bottom line: Ist es nützlich? ja. Ist es notwendig? Nein.

"Sollte es verwendet werden?": Ich persönlich würde sagen, ja. Aber es hängt davon ab, was Ihre Seite macht. Wenn die Kriterien aus dem obigen Beispiel entspricht die Ressource-handling, dann ja. Sonst wäre es ja nicht wirklich wichtig.

fügt einen Ereignis-listener für updateready können wir swapCache:
```
appCache.addEventListener("updateready", function(event) {
    appCache.swapCache();
    window.reload();
}, false);
```
(appCache) Ereignis-Variablen:
```
progress.
         total 
         loaded 
         lengthComputable
GENERAL (for all):
         clipboardData
         cancelBubble
         returnValue
         srcElement
         defaultPrevented
         timeStamp
         cancelable
         bubbles
         eventPhase
         currentTarget
         target
         type
         stopPropagation
         preventDefault
         initEvent
         stopImmediatePropagation
```
Schön externe Seiten:

http://www.html5rocks.com/en/tutorials/appcache/beginner/ - appCache-Grundlagen.

http://www.htmlgoodies.com/html5/other/html-5-appcache-by-example.html - appCache Beispiel.

http://www.jefclaes.be/2012/04/visualizing-offline-application-cache.html - manifest FALLBACK.

Ist swapCache() erforderlich, der HTML5 offline apps? - swapCache Informationen (auch die Kommentare Lesen).

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching - Allgemeine HTTP-cache-Informationen.

Wenn diese waren die ersten, die Ressource, die ich Lesen, wenn die Erforschung der Nutzung der manifest-Datei, es würde gespeichert haben mir Stunden der Arbeit. Große und präzise Zusammenfassung!

InformationsquelleAutor Aleksander Azizi

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Verwenden Sie Den Anwendungs-Cache Mit MANIFESTEN

Behandlung von Ereignissen ausgelöst, die in den Anwendungs-cache

Szenario handling (Fehler(N), Ereignisse und Trigger)

swapCache

(appCache) Ereignis-Variablen:

Schön externe Seiten: