Heim > Artikel > Web-Frontend > Wie implementiert man den Anwendungscache in HTML5? Eine kurze Beschreibung der Offline-Speichertechnologie
Wie implementiert man den Anwendungscache in HTML5? Eine kurze Beschreibung der Offline-Speichertechnologie
- 青灯夜游Original
- 2018-09-08 17:07:421557Durchsuche
In diesem Kapitel stellen wir Ihnen vor, wie Sie den Anwendungscache mit HTML5 implementieren. Beschreiben Sie kurz die Offline-Speichertechnologie. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
Vor HTML5 mussten wir eine Verbindung zum Internet herstellen, um auf die Seite zuzugreifen. Mit der Verbreitung des mobilen Internets ist der Standort der Geräteterminals jedoch nicht mehr festgelegt. Mobile Geräte sind stark auf drahtlose Signale angewiesen, aber die Zuverlässigkeit drahtloser Netzwerke ist nicht stabil. Beispielsweise kann auf Websites nicht zugegriffen werden, wenn sie durch Tunnel oder an Orten mit schwacher Signalstärke verlaufen. Dies ist zweifellos eine schlechte Benutzererfahrung, daher ist das Offline-Caching in HTML5 nicht möglich (applicationCache) löst dieses Problem.
1: Was ist Offline-Caching?
Der HTML5-Offline-Cache, auch ApplicationCache genannt, ist eine der neuen Funktionen von HTML5. Ein einfaches Verständnis besteht darin, dass die Daten nach dem ersten Laden zwischengespeichert werden und beim nächsten Mal ohne Netzwerknutzung geladen werden können um Webseiten oder Spiele mit statischen Daten zu vergleichen. Natürlich können nicht alle Browser die neuen Funktionen von Html5 unterstützen, und das Gleiche gilt auch für das Offline-Caching. Allerdings werden IE9 (einschließlich) und Browser unter IE9 derzeit nicht unterstützt. Bei mobiler Nutzung sollte es unterstützt werden. Außerdem lässt sich relativ einfach erkennen, ob Offline-Caching unterstützt wird.
<script>
if(window.applicationCache){
alert("支持离线缓存");
}
else{
alert("不支持离线缓存");
}
</script>Zweitens: So verwenden Sie
Der HTML5-Offline-Cache ist ein vom Cache des Browsers getrennter Cache-Bereich. Um Daten in diesem Cache zu speichern, müssen Sie eine Beschreibungsdatei (. Manifest) verwenden. listet die Ressourcen auf, die heruntergeladen und zwischengespeichert werden müssen.
1. Importieren Sie die Manifestdatei
<!DOCTYPE html>
<html>
<head>
<!--就是在这里引入，注意引入也是讲究路劲跟文件名的，
这里文件名是test，后缀是mainfest，路劲在当前的html下面
（一般放在html当前文件夹下面也没什么问题，我是这么放的）-->
<html manifest="test.manifest">
<meta charset="UTF-8">
<title>html5 离线缓存</title>
</head>
<body>
</body>
</html>2. Nachdem die Einführung abgeschlossen ist, besteht der nächste Schritt darin, den Dateicode test.mainfest zu schreiben.
Manifestdateien sind einfache Textdateien, die dem Browser mitteilen, was zwischengespeichert wird (und was nicht).
Die Manifestdatei kann in drei Teile unterteilt werden:
①CACHE MANIFEST – Die unter dieser Überschrift aufgeführten Dateien werden nach dem ersten Download zwischengespeichert
②NETZWERK – Die unter dieser Überschrift aufgeführten Dateien erfordern eine Verbindung zum Server und werden nicht zwischengespeichert
③FALLBACK – Die unter diesem Titel aufgeführten Dateien geben die Fallback-Seite an, wenn auf die Seite nicht zugegriffen werden kann (z. B. eine 404-Seite).
Vollständiger Code
CACHE MANIFEST//必须以这个开头
version 1.0 //最好定义版本，更新的时候只需修改版本号
CACHE:
m.png
test.js
test.css
NETWORK:
*
FALLBACK
online.html offline.htmlDie Manifestdatei muss mit dem richtigen MIME konfiguriert werden -type, das ist „text/cache-manifest“, dies wird auf dem Webserver konfiguriert.
Analyse:
Zeilen, die mit # beginnen, stehen für Kommentare. Die Dateien unter CACHE sind alle zwischengespeicherte Dateien. Das bedeutet, dass bei jeder Anforderung aus dem Netzwerk immer die angegebene Datei vom Netzwerk zwischengespeichert wird. FALLBACK: Wenn die angegebene Datei nicht gefunden werden kann, wird sie an eine neue Adresse umgeleitet. Standards werden alle großgeschrieben.
3. Aktualisierungen dynamisch über JS steuern
Die Anwendung bleibt im Cache, nachdem sie offline ist, es sei denn, eine der folgenden Situationen tritt ein:
Der Benutzer löscht den Zugriff des Browsers auf Ihre Website. Datenspeicherung.
Die Manifestdatei wurde geändert.
Bitte beachten Sie: Das Aktualisieren einer im Manifest aufgeführten Datei bedeutet nicht, dass der Browser die Ressource erneut zwischenspeichert. Die Manifestdatei selbst muss geändert werden.
1) Cache-Status: Das window.applicationCache-Objekt ist eine programmgesteuerte Zugriffsmethode auf den Anwendungscache des Browsers. Mit seiner Statuseigenschaft kann der aktuelle Status des Caches angezeigt werden.
Der Wert von applicationCache.status ist wie folgt:
0 === Nicht zwischengespeichert
1 === Leerlauf (der Cache ist der neueste Status)
2 === Wird geprüft
3 === Herunterladen
4 === Update bereit
5 === Cache-Ablauf
var appCache = window.applicationCache;
switch (appCache.status) {
case appCache.UNCACHED: // UNCACHED == 0
return 'UNCACHED';
break;
case appCache.IDLE: // IDLE == 1
return 'IDLE';
break;
case appCache.CHECKING: // CHECKING == 2
return 'CHECKING';
break;
case appCache.DOWNLOADING: // DOWNLOADING == 3
return 'DOWNLOADING';
break;
case appCache.UPDATEREADY: // UPDATEREADY == 4
return 'UPDATEREADY';
break;
case appCache.OBSOLETE: // OBSOLETE == 5
return 'OBSOLETE';
break;
default:
return 'UKNOWN CACHE STATUS';
break;
};2) Den Cache aktiv aktualisieren: applicationCache.update()
<script> //利用定时器隔一定时间自动更新一下缓存
setInterval(function(){
applicationCache.update();
},50000);</script>Um den Cache programmgesteuert zu aktualisieren, rufen Sie bitte zuerst 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.
var appCache = window.applicationCache;
appCache.update(); // Attempt to update the user's cache.
...
if (appCache.status == window.applicationCache.UPDATEREADY) {
appCache.swapCache(); // The fetch was successful, swap in the new cache.Eine einfache Offline-Caching-Anwendung
Erstellen Sie ein Webprojekt AppCache, einschließlich vier Dateien:
appcache_offline.html
<html manifest="test.manifest"> <head> <title>AppCache Test</title> <link rel="stylesheet" href="test.css"> <script src="test.js"></script> </head> <body> <p><output id="test"></output></p> <div id="log"></div> </body> </html>
Manifestdatei: Test .manifest
CACHE MANIFEST #VERSION 1.0 CACHE: test.css
test.css
output { font: 2em sans-serif; }test.js
setTimeout(function () {
document.getElementById('test').value = new Date();
}, 1000);Das obige ist der detaillierte Inhalt vonWie implementiert man den Anwendungscache in HTML5? Eine kurze Beschreibung der Offline-Speichertechnologie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!