suchen

Heim  >  Artikel  >  Web-Frontend  >  Was ist der HTML5-Offline-Cache? Manifest_html5-Tutorial-Fähigkeiten

Was ist der HTML5-Offline-Cache? Manifest_html5-Tutorial-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:51:342001Durchsuche

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
  1. >
  2. <html manifest="demo. appcache“>
  3. ...
  4. 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
  1. CACHE-MANIFEST
  2. # 2012-02-21 v1.0.0
  3. /theme.css
  4. /logo.gif
  5. /main.js
  7. NETZWERK:
  8. login.asp
  10. FALLBACK:
  11. /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
  1. var appCache = window.applicationCache;   
  2.     
  3. Schalter (appCache.status) {   
  4.     
  5.   case appCache.UNCACHED: // UNCACHED == 0   
  6.     
  7.     return ‘UNCACHED’;   
  8.     
  9.     Pause;   
  10.     
  11.   case appCache.IDLE: // IDLE == 1   
  12.     
  13.     zurück ‘IDLE’;   
  14.     
  15.     Pause;   
  16.     
  17.   case appCache.CHECKING: // CHECKING == 2   
  18.     
  19.     zurück ‘PRÜFEN’;   
  20.     
  21.     Pause;   
  22.     
  23.   case appCache.DOWNLOADING: // DOWNLOADING == 3   
  24.     
  25.     zurück ‘HERUNTERLADEN’;   
  26.     
  27.     Pause;   
  28.     
  29.   case appCache.UPDATEREADY:  // UPDATEREADY == 4   
  30.     
  31.     zurück ‘UPDATEREADY’;   
  32.     
  33.     Pause;   
  34.     
  35.   case appCache.OBSOLETE: // OBSOLETE == 5   
  36.     
  37.     zurückgeben „VERALTET“;   
  38.     
  39.     Pause;   
  40.     
  41.   Standard:   
  42.     
  43.     Zurück ‘UKNOWN CACHE STATUS‘;   
  44.     
  45.     Pause;   
  46.     
  47. };   
  48.   

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
  1. var appCache = window.applicationCache;
  3. appCache.update(); // Versuch, den Cache des Benutzers zu aktualisieren
  5. …
  7. if (appCache.status == window.applicationCache.UPDATEREADY) {
  9. appCache.swapCache(); // Der Abruf war erfolgreich, tauschen Sie den neuen Cache ein
  11. }

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
  1. // Überprüfen Sie, ob beim Laden der Seite ein neuer Cache verfügbar ist.
  3. window.addEventListener(‘load’, function(e) {
  5. window.applicationCache.addEventListener(‘updateready’, function(e) {
  7. if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
  9.  // Browser hat einen neuen App-Cache heruntergeladen
  11.  // Tauschen Sie es ein und laden Sie die Seite neu, um die neue Schärfe zu erhalten.
  13. window.applicationCache.swapCache();
  14. window.location.reload();
  16. } else {
  18.  // Manifest hat sich nicht geändert
  20. }
  22. }, false);
    24. },
  24. falsch);

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

C/C-CodeInhalt in die Zwischenablage kopieren
  1. var appCache = window.applicationCache;
  3. // Wird nach dem ersten Cache des Manifests ausgelöst
  5. appCache.addEventListener(‘cached’, handleCacheEvent, false);
  7. // Es wird immer nach einem Update gesucht
    9. appCache.addEventListener(‘checking’, handleCacheEvent,
  9. false);
  11. // Ein Update wurde gefunden. Der Browser ruft Ressourcen ab.
    13. appCache.addEventListener(‘downloading’, handleCacheEvent,
  13. false);
  15. // Das Manifest gibt 404 oder 410 zurück, der Download ist fehlgeschlagen,
  17. // oder das Manifest hat sich während des Downloads geändert
    19. appCache.addEventListener(‘error’, handleCacheError,
  19. false);
  21. // Wird nach dem ersten Download des Manifests ausgelöst
    23. appCache.addEventListener(‘noupdate’, handleCacheEvent,
  23. false);
  25. // Wird ausgelöst, wenn die Manifestdatei 404 oder 410 zurückgibt.
  27. // Dies führt dazu, dass der Anwendungscache gelöscht wird
    29. appCache.addEventListener(‘obsolete’, handleCacheEvent,
  29. false);
  31. // Wird für jede im Manifest aufgeführte Ressource ausgelöst, während sie abgerufen wird
    33. appCache.addEventListener(‘progress’, handleCacheEvent,
  33. false);
  35. // Wird ausgelöst, wenn die Manifestressourcen neu heruntergeladen wurden
    37. appCache.addEventListener(‘updateready’, handleCacheEvent,
  37. 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

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Semantische B- und I-Tags in HTML5_HTML5-Tutorial-TippsNächster Artikel：Semantische B- und I-Tags in HTML5_HTML5-Tutorial-Tipps

In Verbindung stehende Artikel

Mehr sehen