Detaillierte Code-Erklärung des HTML5-Offline-Anwendungs-Anwendungscache

1. Anwendungsszenarien

Wir verwenden normalerweise den Browser Das Speichern einer einzelnen Webseite auf der Festplatte des Benutzers spart Bandbreite, wenn der Benutzer erneut surft, aber trotzdem ist das Web ohne das Internet immer noch nicht zugänglich. Um den Zugriff auf die Webanwendung auch im Offline-Zustand zu ermöglichen. html5 bietet Offline-Speicherfunktion über die Anwendungscache-API. Voraussetzung ist, dass die Webseite, die Sie besuchen möchten, mindestens einmal online besucht wurde.

Was ist der Unterschied zwischen lokalem Offline-Speicher und herkömmlichem Browser-Cache?

1. Der Browser-Cache umfasst hauptsächlich zwei Kategorien:

a. Cache-Aushandlung: Zuletzt geändert, Etag

Der Browser fragt den Server, ob die Seite geändert wurde Wenn keine Änderung vorliegt, wird 304 zurückgegeben und der Browser durchsucht direkt die lokale Cache-Datei. Andernfalls gibt der Server neuen Inhalt zurück.

b. Vollständiges Caching: Cache-Kontrolle, läuft ab

Legen Sie die Cache-Ablaufzeit über „Ablauf“ fest, und es besteht keine Notwendigkeit, vor dem Ablauf mit der Serveranforderung zu interagieren.

2. Offline-Speicher bietet Dienste für das gesamte Web und der Browser-Cache speichert nur eine einzelne Seite zwischen.

3. Offline-Speicher kann angeben, welche Dateien zwischengespeichert werden müssen und welche Dateien dies können kann nur online durchsucht werden.

4. Der Offline-Speicher kann Benutzer dynamisch zur Aktualisierung benachrichtigen.

2. So implementieren Sie

Offline-Speicher wird über Manifestdateien verwaltet und erfordert serverseitige Unterstützung. Verschiedene Server haben unterschiedliche Möglichkeiten, die Unterstützung zu aktivieren.

CACHE MANIFEST//必须以这个开头
version 1.0 //最好定义版本，更新的时候只需修改版本号
CACHE:
    m.png
    test.js
    test.css
NETWORK:
    *
FALLBACK
    online.html offline.html

CACHE gibt Dateien an, die zwischengespeichert werden müssen; NETWORK gibt Dateien an, die nur über das Internet durchsucht werden können, * steht für andere Dateien als die im CACHE; jede Zeile von FALLBACK gibt Dateien an, die online bzw. offline verwendet werden

Damit das Manifest den Speicher verwalten kann, müssen Sie auch das Manifest-Attribut im HTML-Tag wie folgt definieren:

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE HTML</span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;"><a href="http://www.php.cn/java/java-ymp-Lang.html" target="_blank">lang</a></span><span style="color: #0000ff;">="en"</span><span style="color: #ff0000;"> manifest</span><span style="color: #0000ff;">=&#39;test.manifest&#39;</span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"><</span><span style="color: #800000;"><a href="http://www.php.cn/html/html-HEAD-2.html" target="_blank">head</a></span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">char<a href="http://www.php.cn/code/8209.html" target="_blank">set</a></span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span><br/><br/><span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

Vergessen Sie nicht, dass diese Anwendungen Serverunterstützung benötigen.

So aktivieren Sie die Apache-Serverunterstützung: Fügen Sie einen Code in conf/mime.types hinzu:

            test/cache-manifest manifest

So aktivieren Sie den IIS-Server:

Rechtsklick - -HTTP---Klicken Sie unter MIME-Zuordnung auf den Dateityp --- Neu ---, geben Sie manifest für die Erweiterung ein und geben Sie test/cache-manifest für den Typ

<🎜 ein > 3. Aktualisierungen dynamisch über JS steuern

applicationCache

object bietet einige Methoden und Ereignisse zur Verwaltung des interaktiven Prozesses der Offline-Speicherung. Durch Eingabe von window.applicationCache in der Firefox8.0-Konsole können Sie alle Eigenschaften und Ereignismethoden dieses Objekts sehen

.

applicationCache.onchecking = function(){
   //检查manifest文件是否存在
}

applicationCache.ondownloading = function(){
   //检查到有manifest或者manifest文件
   //已更新就执行下载操作
   //即使需要缓存的文件在请求时服务器已经返回过了
}

applicationCache.onnoupdate = function(){
   //返回304表示没有更新，通知浏览器直接使用本地文件
}

applicationCache.onprogress = function(){
   //下载的时候周期性的触发，可以通过它
   //获取已经下载的文件个数
}

applicationCache.oncached = function(){
   //下载结束后触发，表示缓存成功
}

application.onupdateready = function(){
   //第二次载入，如果manifest被更新
   //在下载结束时候触发
   //不触发onchched
   alert("本地缓存正在更新中。。。");
   if(confirm("是否重新载入已更新文件")){
       applicationCache.swapCache();
       location.reload();
   }
}

applicationCache.onobsolete = function(){
   //未找到文件，返回404或者401时候触发
}

applicationCache.onerror = function(){
   //其他和离线存储有关的错误
}

4. Interaktion zwischen Browser und Server

Es gab eine Interviewfrage wie diese: „Beschreibung in die Adressleiste des Browsers eingeben: www. Was ist nach baidu.com passiert?“

1. Der Server gibt Baidu-Seitenressourcen zurück und der Browser lädt den HTML-Code

2. Der Browser beginnt mit der Analyse

3. Den Link gefunden und eine Ladeanforderung gesendet die CSS-Datei

4. Der Browser rendert die Seite

5. Das

Bild wurde gefunden, eine Anfrage zum Laden des Bildes gesendet und 6. Senden Sie die Anforderungs-JS-Datei, blockiert das Rendern. Wenn js auf dem Dom ausgeführt wird, wird es erneut gerendert

Wie ist bei Seiten, die Offline-Speicher unterstützen, die Interaktion zwischen dem Browser und dem Server?

Erste Seite laden:

1-6: Wie oben

7: Seiten und Daten, die auf der angeforderten Seite zwischengespeichert werden müssen, auch wenn sie sich auf der vorherigen Seite befinden. Es wurde im Schritt angefordert (dies ist ein energieverbrauchender Ort)

8: Der Server gibt alle angeforderten Dateien zurück und der Browser speichert sie lokal

Laden Sie die Seite erneut:

1: Senden Sie eine Anfrage

2: Verwenden Sie lokal gespeicherte Offlinedateien

3: Analysieren Sie die Seite

4: Fordern Sie die Manifestdatei des Servers an, um festzustellen, ob eine Änderung vorliegt. Geben Sie 304 zurück, was bedeutet, dass keine Änderung vorliegt, und fahren Sie mit Schritt 5 fort, andernfalls fahren Sie mit Schritt 6 fort

5: Geben Sie 7-8 der ersten Ladeseite ein

6: Lokalen Speicher verwenden und nicht erneut anfordern

Das obige ist der detaillierte Inhalt vonDetaillierte Code-Erklärung des HTML5-Offline-Anwendungs-Anwendungscache. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!