Der Offline-Zugriff wird für webbasierte Anwendungen immer wichtiger. Obwohl alle Browser zwischen Zwischenspeichern sind, sind sie nicht zuverlässig und spielen möglicherweise nicht immer die erwartete Rolle. HTML5 verwendet die ApplicationCache -Schnittstelle, um einige der Probleme zu lösen, die durch den Offline -Gebrauch verursacht werden.
Die Verwendung einer Cache -Schnittstelle kann die folgenden drei Vorteile für Ihre Anwendung bringen :Offline -Surfen - Benutzer können Ihre vollständige Website während offline durchsuchen
Geschwindigkeit - Die zwischengespeicherte Ressource ist eine lokale Ressource und lädt also schneller.
Server laden weniger - Der Browser lädt nur Ressourcen vom Server herunter, der sich geändert hat.
Mit App -Cache (auch als AppCache bezeichnet) können Entwickler angeben, auf welche Dateien der Browser für Offline -Benutzer zwischenstrahlen soll. Ihre App lädt und wird normal ausgeführt, auch wenn der Benutzer bei offline die Taste für Aktualisierung drückt.
Cache Manifest -Datei
Eine Cache -Manifestdatei ist eine einfache Textdatei, in der Ressourcen aufgeführt sind, die der Browser für den Offline -Zugriff zwischenspeichert.
Referenzmanifestdatei
Fügen Sie das Manifest -Attribut in das HTML -Tag des Dokuments hinzu, um das Caching für eine Anwendung für eine Anwendung zu aktivieren:
<html manifest = "example.appcache">
...
</html>
Sie sollten die Manifest -Eigenschaft auf jeder Seite der Web -App hinzufügen, die Sie für einen zwischengestrichenen Web -App verwenden möchten. Wenn die Seite nicht das Manifest -Attribut enthält, wird der Browser die Seite nicht zwischenspeichert (es sei denn, sie ist explizit in der Manifestdatei aufgeführt). Dies bedeutet, dass jede Webseite, die der Benutzer mit dem Manifest durchbaut, implizit zum Anwendungs -Cache hinzugefügt wird. Daher müssen Sie nicht jede Seite in der Liste auflisten.
Die offensichtliche Eigenschaft kann auf eine absolute URL oder einen relativen Pfad verweisen, aber die absolute URL muss mit der entsprechenden Netzwerkanwendung übereinstimmen. Die Manifestdatei kann jede Dateierweiterung verwenden, muss jedoch mit dem richtigen MIME -Typ angegeben werden (siehe unten).
<html manifest = "http://www.example.com/example.mf">
...
</html>
Die Manifestdatei muss im Text-/Cache-Manifest-MIME-Typ bereitgestellt werden. Möglicherweise müssen Sie Ihrem Webserver oder der Konfiguration von .htaccess einen benutzerdefinierten Dateityp hinzufügen.
Um diesen MIME -Typ in Apache in Apache anzugeben, fügen Sie Ihrer Konfigurationsdatei die folgende Zeile hinzu:
Addtype text/cache-Manifest .Appcache Um diesen MIME-Typ in der App.YAML-Datei der Google App Engine anzugeben, fügen Sie Folgendes hinzu:
- URL: /mystaticdir/(.*/.appcache)
static_files: mysticdir // 1
MIME_TYPE: Text/Cache-Manifest
Upload: MystaticDir /(.*/. Appcache) Manifest -Dateistruktur
Das einfache Listenformat lautet wie folgt:
Cache Manifest
index.html
Stylesheet.css
Bilder/Logo.png
scripts/main.js Dieses Beispiel reitet vier Dateien auf der Webseite aus, die diese Manifestdatei spezifiziert.
Die folgenden Punkte, auf die Sie achten müssen:
Die Cache -Manifest -Zeichenfolge sollte in der ersten Zeile sein und ist unerlässlich.
Die Menge der zwischengespeicherten Daten auf der Website darf 5 MB nicht überschreiten. Wenn Sie jedoch eine App für den Chrome -Webladen schreiben, können Sie unbegrenzte Storage verwenden, um die Einschränkungen unbegrenzt zu machen.
Wenn die Manifestdatei oder die darin angegebene Ressource nicht heruntergeladen werden kann, kann der gesamte Cache -Update -Prozess nicht durchgeführt werden. In diesem Fall wird der Browser weiterhin den ursprünglichen Anwendungs -Cache verwenden.
Schauen wir uns komplexere Beispiele an:
Cache Manifest
# 2010-06-18: v2
# Explizit zwischengespeicherte "Master -Einträge".
Cache :/Favicon.ico
index.html
Stylesheet.css
Bilder/Logo.png
Skripte/main.js
# Ressourcen, bei denen der Benutzer online ist.
Netzwerk :login.php
/Myapi
http://api.twitter.com
# static.html wird serviert, wenn main.py unzugänglich ist
# offline.jpg wird anstelle aller Bilder in Bildern/groß/serviert
# offline.html wird anstelle aller anderen .html -Dateien serviert
ZURÜCKGREIFEN :/main.py /static.html
Bilder/große/Bilder/offline.jpg
*.html /offline.html -Zeilen, die mit # beginnen, sind Kommentarlinien, können aber auch für andere Zwecke verwendet werden. Der App -Cache wird nur aktualisiert, wenn sich die Manifestdatei ändert. Wenn Sie beispielsweise eine Bildressource ändern oder eine JavaScript -Funktion ändern, sind diese Änderungen kein Recache. Sie müssen die Manifestdatei selbst ändern, damit der Browser die zwischengespeicherte Datei aktualisiert. Erstellen Sie Kommentarlinien mit generierten Versionsnummern, Datei -Hash -Werten oder Zeitstempeln, um sicherzustellen, dass Benutzer die neueste Version Ihrer Software erhalten. Sie können den Cache auch programmgesteuert aktualisieren, nachdem eine neue Version angezeigt wird, wie im Abschnitt Update -Cache beschrieben.
Die Liste kann drei verschiedene Teile enthalten: Cache, Netzwerk und Fallback.
Cache :Dies ist der Standardteil des Eintrags. Die unter diesem Header aufgeführten Dateien werden zum ersten Mal explizit zwischengespeichert (oder Dateien unmittelbar nach dem Cache -Manifest).
Netzwerk :Die in diesem Abschnitt aufgeführten Dateien sind Whitelist -Ressourcen, die mit dem Server verbunden werden müssen. Alle Anfragen an diese Ressourcen umgehen den Cache, unabhängig davon, ob der Benutzer offline ist oder nicht. Wildkarten können verwendet werden.
ZURÜCKGREIFEN :Dieser Abschnitt ist optional und wird verwendet, um die Fallback -Seite anzugeben, wenn die Ressource nicht zugänglich ist. Die erste URI repräsentiert die Ressource und die zweite repräsentiert die Backup -Webseite. Beide URIs müssen verwandt sein und den gleichen Ursprung wie die Manifestdatei sein. Wildkarten können verwendet werden.
Bitte beachten Sie: Diese Abschnitte können in beliebiger Reihenfolge angeordnet werden, und jeder Abschnitt kann in derselben Liste wiederholt werden.
Die folgende Liste definiert die umfassende Webseite (offline.html), die angezeigt wird, wenn ein Benutzer versucht, auf das Root einer Website einer Website offline zuzugreifen, und gibt auch an, dass alle anderen Ressourcen (z. B. Ressourcen auf Remote -Websites) eine Internetverbindung erfordern.
Cache Manifest
# 2010-06-18: v3
# Explizit zwischengespeicherte Einträge
index.html
CSS/style.css
# offline.html wird angezeigt, wenn der Benutzer offline ist
ZURÜCKGREIFEN:
//offline.html
# Bei allen anderen Ressourcen (z. B. Websites) muss der Benutzer online sein.
NETZWERK:
*
# Zusätzliche Ressourcen zum Cache
Cache:
Bilder/Logo1.png
Bilder/Logo2.png
Bitte beachten Sie, dass Bilder/Logo3.png: Das System wird die HTML -Datei, die die Manifestdatei verweist, automatisch zwischenspeichert. Sie müssen es also nicht zur Liste hinzufügen, aber wir empfehlen Ihnen, dies zu tun.
HINWEIS : HTTP -Cache -Header und Cache -Beschränkungen, die für Webseiten, die über SSL bereitgestellt werden, eingestellt werden, werden durch Cache -Manifeste ersetzt. Daher kann die von HTTPS bereitgestellte Webseite offline ausgeführt werden. Cache aktualisierenDie App bleibt nach Offline zwischengespeichert, es sei denn, einer der folgenden kommt:
Der Benutzer löscht den Datenspeicher des Browsers auf Ihrer Website.
Die Manifestdatei wurde geändert. Bitte beachten Sie: Die Aktualisierung einer im Manifest aufgeführten Datei bedeutet nicht, dass der Browser die Ressource erneut aufnehmen kann. Die Manifestdatei selbst muss geändert werden.
Der Anwendungs -Cache wird programmatisch aktualisiert.
Cache -StatusDas Objekt für das Fenster. Das Statusattribut kann verwendet werden, um den aktuellen Status des Cache anzuzeigen:
var appcache = window.applicationCache;
Switch (appcache.status) {
case appcache.uncached: // uncached == 0
Rückkehr 'ungekocht';
brechen;
case AppCache.idle: // idle == 1
zurück "idle ';
brechen;
case AppCache.Checking: // Checking == 2
zurück "prüfen";
brechen;
case AppCache.downloading: // download == 3
zurück "herunterladen";
brechen;
case AppCache.updateready: // updateready == 4
zurück 'updateready' zurückgeben;
brechen;
case Appcache.obsolete: // veraltet == 5
zurück "veraltet";
brechen;
Standard:
zurück "UNEKTE Cache -Status" zurückgeben;
brechen;
};
Um den Cache programmgesteuert zu aktualisieren, rufen Sie zuerst applicationCache.update () auf. Dies wird versucht, den Cache des Benutzers zu aktualisieren (vorausgesetzt, die Manifestdatei wurde geändert). Wenn applicationCache.status im Updateready -Status befindet, rufen Sie applicationCache.swapcache () auf, um den ursprünglichen Cache durch den neuen Cache zu ersetzen.
var appcache = window.applicationCache;
appcache.update (); // Versuchen Sie, den Cache des Benutzers zu aktualisieren.
...
if (appcache.status == window.applicationcache.updateready) {
appcache.swapcache (); // Der Abruf war erfolgreich, tauschte den neuen Cache aus.
}
Bitte beachten Sie : Verwenden von update () und swapcache () auf diese Weise werden dem Benutzer keine aktualisierten Ressourcen bereitgestellt. Mit diesem Vorgang können Sie den Browser einfach nach neuen Manifesten überprüfen, bestimmte Updates herunterladen und den App -Cache nachfüllen. Daher muss die Webseite zweimal neu geladen werden, bevor dem Benutzer neue Inhalte zur Verfügung gestellt werden, die erste besteht darin, einen neuen Anwendungs -Cache zu erhalten, und die zweite besteht darin, den Webseiteninhalt zu aktualisieren.Die gute Nachricht ist, dass Sie den Aufwand des Nachladens zweimal vermeiden können. Um Benutzer auf die neueste Version der Website zu aktualisieren, richten Sie einen Listener ein, um Updateready -Ereignisse zu überwachen, wenn die Webseite geladen wird:
// Überprüfen Sie, ob ein neuer Cache auf der Seite geladen wird.
window.addeventListener ('laden', function (e) {
window.applicationcache.addeventListener ('updateready', Funktion (e) {
if (window.applicationcache.status == window.applicationcache.updateready) {
// Browser hat einen neuen App -Cache heruntergeladen.
// Tauschen Sie sie ein und laden Sie die Seite neu, um die neue Schärfe zu erhalten.
window.applicationCache.swapcache ();
if (bestätigen ('Eine neue Version dieser Site ist verfügbar. Laden?')) {
window.location.reload ();
}
} anders {
// Manifest hat sich nicht geändert. Nichts Neues auf dem Server.
}
}, FALSCH);
}, FALSCH);
Appcache -EreignisWie Sie erwartet haben, werden zusätzliche Ereignisse verwendet, um den Zustand des Cache anzuhören. Der Browser löst entsprechende Ereignisse zum Download -Fortschritt, Anwendungs -Cache -Updates und Fehlerstatus aus. Der folgende Code -Snippet richtet einen Ereignishörer für jeden Cache -Ereignisentyp ein:
Funktion HandleCacheEvent (e) {
// ...
}
Funktion HandlecacheError (e) {
alert ('Fehler: Cache hat nicht aktualisiert!');
};
// nach dem ersten Cache des Manifests abgefeuert.
appcache.addeventListener ("zwischengespeichert", HandleCacheeEvent, False);
// nach einem Update überprüfen. Immer das erste Ereignis in der Sequenz abgefeuert.
appcache.addeventListener ("prüfen", HandleCacheeEvent, False);
// Es wurde ein Update gefunden. Der Browser holt Ressourcen.
appcache.addeventListener ('downloading', handlecacheevent, false);
// Das Manifest gibt 404 oder 410 zurück, der Download ist fehlgeschlagen,
// oder das Manifest änderte sich, während der Download im Gange war.
appcache.addeventListener ('error', handlecacheError, false);
// nach dem ersten Download des Manifests abgefeuert.
appcache.addeventListener ('noupdate', HandleCacheEvent, False);
// gefeuert, wenn die Manifestdatei einen 404 oder 410 zurückgibt.
// Dies führt dazu, dass der Anwendungs -Cache gelöscht wird.
appcache.addeventListener ('veraltet', handlecacheevent, false);
// für jede im Manifest aufgeführte Ressource abgefeuert, die so abgerufen wird.
appcache.addeventListener ('progress', handlecacheevent, false);
// gefeuert, wenn die offensichtlichen Ressourcen neu rot geladen wurden.
appcache.addeventListener ('updateready', handlecacheevent, false);
Wenn die in der IT nicht angegebene Manifestdatei oder die darin angegebene Ressource nicht heruntergeladen werden kann, schlägt das gesamte Update fehl. In diesem Fall wird der Browser weiterhin den ursprünglichen Anwendungs -Cache verwenden