HTML5 verwendet die ApplicationCache-Schnittstelle, um Offline-Caching-Technologie zu implementieren und Offline-Probleme zu lösen. HTML5-Tutorial-Fähigkeiten

Einführung
Der Offline-Zugriff wird für webbasierte Anwendungen immer wichtiger. Obwohl alle Browser über Caching-Mechanismen verfügen, sind diese unzuverlässig und funktionieren möglicherweise nicht immer wie erwartet. HTML5 verwendet die ApplicationCache-Schnittstelle, um einige der durch Offline verursachten Probleme zu lösen.
Die Verwendung der Cache-Schnittstelle bringt die folgenden drei Vorteile für Ihre Anwendung:
Offline-Browsing – Benutzer können Ihre gesamte Website offline durchsuchen
Geschwindigkeit – zwischengespeicherte Ressourcen sind lokale Ressourcen, also Die Ladegeschwindigkeit ist schneller.
Geringere Serverlast – der Browser lädt nur Ressourcen von Servern herunter, die sich geändert haben.

Application Cache (auch bekannt als AppCache) ermöglicht Entwicklern festzulegen, welche Dateien der Browser für Offline-Benutzer zwischenspeichern soll. Selbst wenn der Benutzer offline auf die Schaltfläche „Aktualisieren“ drückt, wird Ihre App normal geladen und ausgeführt.
Cache-Manifestdatei
Eine Cache-Manifestdatei ist eine einfache Textdatei, die die Ressourcen auflistet, die der Browser für den Offline-Zugriff zwischenspeichern soll.
Beziehen Sie sich auf die Manifestdatei
Um das Anwendungs-Caching für eine Anwendung zu aktivieren, fügen Sie das Manifest-Attribut zum HTML-Tag des Dokuments hinzu:

Code kopieren

Der Code lautet wie folgt:

...
🎜>

Sie sollten das Manifest-Attribut auf jeder Seite Ihrer Webanwendung hinzufügen, die Sie zwischenspeichern möchten. Wenn eine Webseite das Manifest-Attribut nicht enthält, speichert der Browser die Seite nicht zwischen (es sei denn, das Attribut ist explizit in der Manifestdatei aufgeführt). Dies bedeutet, dass jede Webseite, die der Benutzer durchsucht und die ein Manifest enthält, implizit zum Anwendungscache hinzugefügt wird. Daher müssen Sie nicht jede Seite in Ihrem Inventar auflisten.

Das Manifest-Attribut kann auf eine absolute URL oder einen relativen Pfad verweisen, die absolute URL muss jedoch denselben Ursprung haben wie die entsprechende Webanwendung. Die Manifestdatei kann eine beliebige Dateierweiterung verwenden, muss jedoch mit dem richtigen MIME-Typ bereitgestellt werden (siehe unten).

Code kopierenDer Code lautet wie folgt:

...



Manifestdateien müssen als Text/Cache-Manifest-MIME-Typ bereitgestellt werden. Möglicherweise müssen Sie benutzerdefinierte Dateitypen zu Ihrem Webserver oder Ihrer .htaccess-Konfiguration hinzufügen.
Um diesen MIME-Typ beispielsweise in Apache bereitzustellen, fügen Sie die folgende Zeile zu Ihrer Konfigurationsdatei hinzu:
AddType text/cache-manifest .appcache Um diesen MIME-Typ in der app.yaml-Datei von Google App Engine bereitzustellen, fügen Sie den hinzu Folgendes:
- URL: /mystaticdir/(.*.appcache)
statische_Dateien: mystaticdir/1
mime_type: text/cache-manifest
hochladen: mystaticdir/(. *.appcache) Manifestdatei Struktur
Das einfache Manifestformat lautet wie folgt:
CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js Das Beispiel speichert vier Dateien auf der Webseite, die diese Manifestdatei angibt.
Sie müssen auf die folgenden Punkte achten:
Die Zeichenfolge CACHE MANIFEST sollte in der ersten Zeile stehen und ist erforderlich.
Die zwischengespeicherte Datengröße einer Website darf 5 MB nicht überschreiten. Wenn Sie jedoch eine App für den Chrome Web Store schreiben, können Sie unlimitedStorage verwenden, um diese Einschränkung aufzuheben.
Wenn die Manifestdatei oder die darin angegebenen Ressourcen nicht heruntergeladen werden können, wird der gesamte Cache-Aktualisierungsprozess nicht fortgesetzt. In diesem Fall verwendet der Browser weiterhin den ursprünglichen Anwendungscache.
Sehen wir uns ein komplexeres Beispiel an:
CACHE MANIFEST
# 2010-06-18:v2
# Explizit zwischengespeicherte „Master-Einträge“
CACHE:
/favicon.ico
index.html
stylesheet.css
images/logo.png
scripts/main.js
# Ressourcen, für die der Benutzer online sein muss
NETZWERK:
login.php
/myapi
http://api.twitter.com
# static.html wird bereitgestellt, wenn auf main.py nicht zugegriffen werden kann
# offline.jpg wird anstelle aller Bilder in images/large/ bereitgestellt
# offline.html wird anstelle aller anderen .html-Dateien bereitgestellt
FALLBACK:
/ main.py /static.html
images/large/ images/offline.jpg
*.html /offline.html Zeilen, die mit „#“ beginnen, sind Kommentarzeilen, können aber auch für andere Zwecke verwendet werden. Der App-Cache wird nur aktualisiert, wenn sich seine Manifestdatei ändert. Wenn Sie beispielsweise eine Bildressource oder eine JavaScript-Funktion ändern, werden diese Änderungen nicht erneut zwischengespeichert. Sie müssen die Manifestdatei selbst ändern, damit der Browser die Cache-Datei aktualisieren kann. Durch das Erstellen von Kommentarzeilen mit generierten Versionsnummern, Datei-Hashes oder Zeitstempeln wird sichergestellt, dass Benutzer über die neueste Version Ihrer Software verfügen. Sie können den Cache auch programmgesteuert aktualisieren, wenn eine neue Version verfügbar ist, wie im Abschnitt „Aktualisieren des Caches“ beschrieben.
Ein Manifest kann drei verschiedene Abschnitte enthalten: CACHE, NETWORK und FALLBACK.
CACHE:
Dies ist der Standardteil des Eintrags. Die unter diesem Header aufgeführten Dateien (oder die Dateien unmittelbar nach CACHE MANIFEST) werden beim ersten Herunterladen explizit zwischengespeichert.
NETZWERK:
Die in diesem Abschnitt aufgeführten Dateien sind Ressourcen auf der Whitelist, die mit dem Server verbunden werden müssen. Alle Anfragen für diese Ressourcen umgehen den Cache, unabhängig davon, ob der Benutzer offline ist. Es können Platzhalterzeichen verwendet werden.
FALLBACK:
Dieser Abschnitt ist optional und wird verwendet, um eine Fallback-Seite anzugeben, wenn auf die Ressource nicht zugegriffen werden kann. Der erste URI repräsentiert die Ressource und der zweite die Fallback-Webseite. Beide URIs müssen verwandt sein und denselben Ursprung wie die Manifestdatei haben. Es können Platzhalterzeichen verwendet werden.
Bitte beachten Sie: Diese Abschnitte können in beliebiger Reihenfolge angeordnet werden und jeder Abschnitt kann wiederholt in derselben Liste erscheinen.
Die folgende Liste definiert die „umfassende“ Seite (offline.html), die angezeigt wird, wenn ein Benutzer versucht, offline auf das Stammverzeichnis der Site zuzugreifen, und gibt außerdem an, dass für alle anderen Ressourcen (z. B. auf Remote-Sites) eine erforderlich ist Internetverbindung.
CACHE MANIFEST
# 2010-06-18:v3
# Explizit zwischengespeicherte Einträge
index.html
css/style.css
# offline.html wird angezeigt, wenn der Benutzer ist offline
FALLBACK:
/ /offline.html
# Alle anderen Ressourcen (z. B. Websites) erfordern, dass der Benutzer online ist
NETZWERK:
*
# Zusätzliche Ressourcen zum Zwischenspeichern
CACHE:
images/logo1.png
images/logo2.png
images/logo3.png Bitte beachten Sie: HTML-Dateien, die auf Manifestdateien verweisen, werden automatisch zwischengespeichert. Sie müssen es also nicht zu Ihrer Liste hinzufügen, wir empfehlen Ihnen jedoch, dies zu tun.
Bitte beachten Sie: HTTP-Cache-Header und Cache-Limits, die auf über SSL bereitgestellten Seiten festgelegt sind, werden durch Cache-Manifeste ersetzt. Daher können über https bereitgestellte Webseiten offline ausgeführt werden.

Cache aktualisieren
Apps bleiben offline im Cache, es sei denn, einer der folgenden Fälle tritt ein:
Ein Benutzer löscht den Datenspeicher des Browsers für Ihre Website.
Die Manifestdatei wurde geändert. Hinweis: Das Aktualisieren einer im Manifest aufgeführten Datei bedeutet nicht, dass der Browser die Ressource erneut zwischenspeichert. Die Manifestdatei selbst muss geändert werden.
App-Cache wird programmgesteuert aktualisiert.

Cache-Status
Das window.applicationCache-Objekt bietet programmgesteuerten Zugriff auf den Anwendungscache des Browsers. Über sein Statusattribut kann der aktuelle Status des Caches angezeigt werden:

Code kopieren

Der Code lautet wie folgt:

var appCache = window.applicationCache; >switch ( appCache.status) {
case appCache.UNCACHED: // UNCACHED == 0
return 'UNCACHED';
case appCache.IDLE: // IDLE == 1
return 'IDLE';
case appCache.CHECKING: // CHECKING == 2
return 'CHECKING';
case appCache.DOWNLOADING: // DOWNLOADING == 3
return 'DOWNLOADING';
case appCache.UPDATEREADY: // UPDATEREADY == 4
return 'UPDATEREADY';
case appCache.OBSOLETE : // OBSOLETE == 5
return 'OBSOLETE';
return 'UKNOWN CACHE STATUS';


Um den Cache programmgesteuert zu aktualisieren, rufen Sie zunächst applicationCache.update() auf. Bei diesem Vorgang wird versucht, den Cache des Benutzers zu aktualisieren (vorausgesetzt, die Manifestdatei wurde geändert). Wenn sich applicationCache.status schließlich im Status UPDATEREADY befindet, rufen Sie applicationCache.swapCache() auf, um den ursprünglichen Cache durch den neuen Cache zu ersetzen.





Code kopieren

Der Code lautet wie folgt:


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 aus.

Bitte beachten Sie: Die Verwendung von update() und swapCache() auf diese Weise führt nicht zu einer Bereitstellung der Benutzer Aktualisierte Ressourcen. Dieser Vorgang ermöglicht es dem Browser einfach, nach neuen Manifesten zu suchen, bestimmte Updates herunterzuladen und den App-Cache neu zu füllen. Daher muss die Webseite zweimal neu geladen werden, um dem Benutzer neue Inhalte bereitzustellen, das erste Mal, um einen neuen Anwendungscache abzurufen, und das zweite Mal, um den Webseiteninhalt zu aktualisieren.

Die gute Nachricht ist, dass Sie den Aufwand des zweimaligen Nachladens vermeiden können. Um Benutzer auf die neueste Version der Website zu aktualisieren, können Sie einen Listener einrichten, der beim Laden der Webseite auf das Updateready-Ereignis wartet:





Code kopieren

Der Code lautet wie folgt:
// Ü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 eine neue App heruntergeladen Cache. // Tauschen Sie es aus und laden Sie die Seite neu, um die neue Aktualität zu erhalten. window.applicationCache.swapCache(); if (confirm('Eine neue Version dieser Site ist verfügbar. Laden Sie sie ?')) { window.reload();

} else {

// Manifest hat sich nicht geändert

} , false);
}, false );



APPCACHE-EREIGNISSE

Wie zu erwarten ist, werden zusätzliche Ereignisse verwendet, um den Status des Caches zu überwachen. Der Browser löst entsprechende Ereignisse für den Download-Fortschritt, Anwendungs-Cache-Updates, Fehlerstatus usw. aus. Der folgende Codeausschnitt richtet Ereignis-Listener für jeden Cache-Ereignistyp ein:





Kopieren Sie den Code


Der Code lautet wie folgt:

function handleCacheEvent(e) {
//...
}
function handleCacheError(e) {
alert('Fehler: Cache konnte nicht aktualisiert werden!');
};
// Wird nach dem ersten Cache des Manifests ausgelöst.
appCache.addEventListener('cached', handleCacheEvent, false);
// Suche nach einem Update. Immer das erste Ereignis, das in der Sequenz ausgelöst wird.
appCache.addEventListener('checking', handleCacheEvent, false);
// Ein Update wurde gefunden. Der Browser ruft Ressourcen ab.
appCache.addEventListener('downloading', handleCacheEvent, false);
// Das Manifest gibt 404 oder 410 zurück, der Download ist fehlgeschlagen,
// oder das Manifest hat sich während des Downloads geändert.
appCache.addEventListener('error', handleCacheError, false);
// Wird nach dem ersten Download des Manifests ausgelöst.
appCache.addEventListener('noupdate', handleCacheEvent, false);
// Wird ausgelöst, wenn die Manifestdatei 404 oder 410 zurückgibt.
// Dies führt dazu, dass der Anwendungscache gelöscht wird.
appCache.addEventListener('obsolete', handleCacheEvent, false);
// Wird für jede im Manifest aufgeführte Ressource beim Abrufen ausgelöst.
appCache.addEventListener('progress', handleCacheEvent, false);
// Wird ausgelöst, wenn die Manifestressourcen erneut heruntergeladen wurden.
appCache.addEventListener('updateready', handleCacheEvent, false);

如果清单文件或其中指定的资源无法下载,整个更新都将失败.在这种情况下,浏览器将继续使用原应用缓存