HTML5-Offline-Speicherprinzip-HTML-Tutorial-php.cn

Vorwort:

Mit HTML5 können Sie ganz einfach eine Offline-Version einer Webanwendung erstellen, indem Sie eine Cache-Manifestdatei erstellen.

HTML5 führt Anwendungs-Caching ein, was bedeutet, dass Webanwendungen zwischengespeichert und abgerufen werden können, wenn kein Netzwerk vorhanden ist.

Der Anwendungscache bietet drei Vorteile für Apps:

Offline-Browsing – Benutzer können sie offline verwenden.

Geschwindigkeit – Zwischengespeicherte Ressourcen werden schneller geladen.

Reduzieren Sie die Serverlast – der Browser lädt nur geänderte Ressourcen vom Server herunter.

Prinzip und Umgebung

Wie oben erwähnt, basiert die Offline-Speicherung von HTML5 auf einer neu erstellten .appcache-Datei. Durch die 解析清单 Offline-Speicherressourcen werden diese Ressourcen wie Cookies gespeichert . Später, wenn das Netzwerk offline ist, zeigt der Browser die Seite anhand der offline gespeicherten Daten an.

Genau wie Cookies erfordert auch die Offline-Speicherung von HTML5 eine Serverumgebung.
Hier ist ein kleines Tool – ein einfacher IIS-Server. Platzieren Sie es im Projektaktualisierungsverzeichnis und doppelklicken Sie, um es auszuführen, um die Serverumgebung zu simulieren.
Link: http://pan.baidu.com/s/1jG86UV0 Passwort: ja9h

Analyseliste

Bevor Sie beginnen, müssen Sie die manifest (d. h. die .appcache-Datei) verstehen und wissen, wie die obige 解析清单 geschrieben wird.

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 – 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 die Fallback-Seite (z. B. eine 404-Seite) an, wenn auf die Seite nicht zugegriffen werden kann

Im Online-Modus liest der Benutzeragent das Manifest bei jedem Besuch der Seite. Wenn Änderungen gefunden werden, werden alle Ressourcen im Manifest neu geladen.

CACHE-MANIFEST

Die erste Zeile, CACHE MANIFEST, ist erforderlich:

<span style="color: #008080;">1</span> CACHE MANIFEST / theme.css /logo.gif / main.js

Nach dem Login kopieren

Die obige Manifestdatei listet drei Ressourcen auf: eine CSS-Datei, ein GIF-Bild und eine JavaScript-Datei. Wenn die Manifestdatei geladen wird, lädt der Browser diese drei Dateien aus dem Stammverzeichnis der Website herunter. Wenn der Benutzer dann die Verbindung zum Internet trennt, sind diese Ressourcen weiterhin verfügbar.

NETZWERK

Whitelist, verwenden Sie den Platzhalter „*“. In diesem Status werden alle URLs, die nicht im relevanten Cache-Bereich angezeigt werden, standardmäßig mit der HTTP-bezogenen Cache-Header-Richtlinie versehen.

Der folgende Abschnitt NETZWERK gibt an, dass die Datei „login.asp“ niemals zwischengespeichert wird und nicht offline verfügbar ist:

<span style="color: #008080;">1</span> NETWORK: login.asp

Nach dem Login kopieren

* kann verwendet werden, um anzugeben, dass alle anderen Ressourcen/Dateien eine Internetverbindung erfordern:

NETWORK: *

Nach dem Login kopieren

FALLBACK

Der folgende FALLBACK-Abschnitt gibt an, dass alle Dateien im Verzeichnis /html5/ durch „offline.html“ ersetzt werden, wenn keine Internetverbindung hergestellt werden kann:

ALLBACK：/html5/ /404.html

Nach dem Login kopieren

Hinweis: Der erste URI ist die Ressource, der zweite ist der Fallback.

Cache aktualisieren

Sobald eine App zwischengespeichert ist, bleibt sie zwischengespeichert, bis:

Benutzer löscht Browser-Cache
Die Manifestdatei wurde geändert
Anwendungscache nach Programm aktualisieren

Demo

<span style="color: #0000ff;">case</span>/ |-- index.html | |-- demo.appcache | |-- 简易IIS服务器.exe | `-- image |-- HTML5-Offline-Speicherprinzip `-- HTML5-Offline-Speicherprinzip

Nach dem Login kopieren

index.html

 
 
 
    <meta charset="UTF-8"> 
    <title>HTML5离线存储</title>
 
 
    <img src="image/HTML5-Offline-Speicherprinzip" alt=""> 
    <img src="image/HTML5-Offline-Speicherprinzip" alt="">

Nach dem Login kopieren

demo.appcache

CACHE MANIFEST #v01 image/HTML5-Offline-Speicherprinzip   NETWORK:*FALLBACK: /

Nach dem Login kopieren

Bildordner speichert
HTML5-Offline-Speicherprinzip

HTML5-Offline-Speicherprinzip

Okay, dann führen Sie es aus简易IIS服务器.exe Probieren Sie es aus.
Wenn iis eingeschaltet ist
Alt text
Wenn iis ausgeschaltet ist (es ist ausgeschaltet, wird keine Auswirkung sichtbar, wenn es angehalten wird)

Sie können sehen, dass 图片1 erfolgreich offline angezeigt wurde, 图片2 jedoch nicht wie gewohnt angezeigt werden kann.

Jetzt möchte ich die Positionen von 图片2 und 图片1 ändern.

 
    <img src="image/HTML5-Offline-Speicherprinzip" alt=""> 
    <img src="image/HTML5-Offline-Speicherprinzip" alt="">

Nach dem Login kopieren

这时候发现问题来了，html明明修改了为什么图片没有置换过来呢，我不是在demo.appcache文件的NETWORK写了星号吗?除了CACHE MANIFEST文件其它都采用在线模式。查资料得知：引入manifest的页面,即使没有被列入缓存清单中，仍然会被用户代理缓存。
好吧，那我把.appcache文件更新下，于是乎把头部的版本号修改一下#v02。刷新下页面还是没反应！再刷新，有了！为什么？

　　对于浏览器来说,manifest的加载是要晚于其他资源的. 这就导致check manifest的过程是滞后的.发现manifest改变.所有浏览器的实现都是紧随这做静默更新资源.以保证下次pv,应用到更新.

通过控制台我们能够窥探一二：

第一次刷新，应用程序缓存更新准备事件,
第二次刷新才会看到效果。

缓存立即执行

我们的产品已经更新了用户却要第二次进来才能够看到，这样用户体验也太差了吧，有什么方式能够解决呢？好在html5给javascript提供了相关的API。

API篇幅太多自行查看把，这里我晒下我测试成功的code：

<span style="color: #008080;"> 1</span> <span style="color: #008000;">/*</span><span style="color: #008000;">code1,简单粗暴的</span><span style="color: #008000;">*/</span>
<span style="color: #008080;"> 2</span> applicationCache.onupdateready = <span style="color: #0000ff;">function</span><span style="color: #000000;">(){
</span><span style="color: #008080;"> 3</span> 　　<span style="color: #000000;">applicationCache.swapCache();
</span><span style="color: #008080;"> 4</span> 　　<span style="color: #000000;">location.reload();
</span><span style="color: #008080;"> 5</span> <span style="color: #000000;">};
</span><span style="color: #008080;"> 6</span> <span style="color: #008000;">/*</span><span style="color: #008000;">code2，缓存公用方法</span><span style="color: #008000;">*/</span>
<span style="color: #008080;"> 7</span> <span style="color: #008000;">//</span><span style="color: #008000;"> var EventUtil = {</span>
<span style="color: #008080;"> 8</span> <span style="color: #008000;">//</span><span style="color: #008000;"> addHandler: function(element, type, handler) {</span>
<span style="color: #008080;"> 9</span> <span style="color: #008000;">//</span><span style="color: #008000;"> if (element.addEventListener) {</span>
<span style="color: #008080;">10</span> <span style="color: #008000;">//</span><span style="color: #008000;"> element.addEventListener(type, handler, false);</span>
<span style="color: #008080;">11</span> <span style="color: #008000;">//</span><span style="color: #008000;"> } else if (element.attachEvent) {</span>
<span style="color: #008080;">12</span> <span style="color: #008000;">//</span><span style="color: #008000;"> element.attachEvent(“on” + type, handler);</span>
<span style="color: #008080;">13</span> <span style="color: #008000;">//</span><span style="color: #008000;"> } else {</span>
<span style="color: #008080;">14</span> <span style="color: #008000;">//</span><span style="color: #008000;"> element["on" + type] = handler;</span>
<span style="color: #008080;">15</span> <span style="color: #008000;">//</span><span style="color: #008000;"> }</span>
<span style="color: #008080;">16</span> <span style="color: #008000;">//</span><span style="color: #008000;"> }</span>
<span style="color: #008080;">17</span> <span style="color: #008000;">//</span><span style="color: #008000;"> };</span>
<span style="color: #008080;">18</span> <span style="color: #008000;">//</span><span style="color: #008000;"> EventUtil.addHandler(applicationCache, “updateready”, function() { //缓存更新并已下载，要在下次进入页面生效</span>
<span style="color: #008080;">19</span> <span style="color: #008000;">//</span><span style="color: #008000;"> applicationCache.update(); //检查缓存manifest文件是否更新，ps:页面加载默认检查一次。</span>
<span style="color: #008080;">20</span> <span style="color: #008000;">//</span><span style="color: #008000;"> applicationCache.swapCache(); //交换到新的缓存项中，交换了要下次进入页面才生效</span>
<span style="color: #008080;">21</span> <span style="color: #008000;">//</span><span style="color: #008000;"> location.reload(); //重新载入页面</span>
<span style="color: #008080;">22</span> <span style="color: #008000;">//</span><span style="color: #008000;"> });</span>

Nach dem Login kopieren

code1一般用在页面加载时直接触发，而code2的方式可后期检查更新。