suchen

Heim >Web-Frontend >H5-Tutorial >HTML5-Offline-Caching

HTML5-Offline-Caching

黄舟
黄舟Original
2017-02-16 14:39:351427Durchsuche


Html5 führt Anwendungs-Caching ein, was bedeutet, dass Webanwendungen zwischengespeichert und aufgerufen werden können, wenn keine Netzwerkverbindung besteht.

1.1 Was ist Cache-Manifest?

Manifest ist zunächst eine Datei mit dem Suffix minifest oder appcache, in der die Dateien definiert sind, die zwischengespeichert werden müssen Wenn Sie manifest unterstützen, wird die Datei gemäß den Regeln der Manifestdatei lokal gespeichert, sodass auf die Seite ohne Netzwerkverbindung zugegriffen werden kann.

Wenn wir den Appcache zum ersten Mal richtig konfigurieren und erneut auf die Anwendung zugreifen, prüft der Browser zunächst, ob Änderungen in der Manifestdatei vorliegen. Die entsprechenden Änderungen werden aktualisiert Gleichzeitig wird der Appcache im Browser geändert. Wenn keine Änderung erfolgt, werden die Appcache-Ressourcen direkt zurückgegeben.

1.2 Vorteile des Anwendungscachings:

(1) Offline-Browsing: Benutzer können Apps verwenden, wenn sie offline sind

(2) Schneller: Zwischengespeicherte Ressourcen werden schneller geladen

(3) Reduzieren Sie die Serverlast: Der Browser muss nur geänderte oder aktualisierte Ressourcen vom Server herunterladen.

2. So verwenden Sie

Es gibt eine Webanwendung mit drei Dateien: index.html, a.js, b.css. Jetzt müssen die JS- und CSS-Dateien zwischengespeichert werden >

1. Fügen Sie

<html manifest="test.manifest">

zu index.html hinzu. 2. Das

-Manifestformat lautet wie folgt: test.manifest

CACHE MANIFEST
#上面一句必须
#v1.0.0
#需要缓存的文件
CACHE:
a.js
b.css
#不需要缓存的文件
NETWORK:
*
#无法访问页面
FALLBACK:
404.html
3. Der MIME-Typ der Manifestdatei muss vom Typ

sein text/cache-manifestManifestdatei, das Grundformat besteht aus drei Abschnitten: CACHE, NETWORK und FALLBACK, von denen NETWORK und FALLBACK optional sind.

Die erste Zeile von CACHE MANIFEST hat ein festes Format und muss vorangestellt werden.

Kommentare, die mit # beginnen, werden normalerweise mit einer Versionsnummer in der zweiten Zeile geschrieben, die verwendet wird, um die Rolle des Manifests zu ändern, wenn die zwischengespeicherte Datei aktualisiert wird. Dabei kann es sich um eine Versionsnummer, einen Zeitstempel oder einen MD5-Code handeln usw. warten.

CACHE: (erforderlich)

Identifiziert, welche Dateien zwischengespeichert werden müssen. Dabei kann es sich um einen relativen oder einen absoluten Pfad handeln. 

CACHE:
a.css
http://www.php.cn/

NETZWERK: (optional)

Dieser Teil ist die Datei, die direkt gelesen werden soll. Unter Umgehung des Caches können Sie den Platzhalter * verwenden.

Der folgende Code „login.asp“ wird niemals zwischengespeichert und ist nicht offline verfügbar: 

NETWORK:
login.asp
Ein Sternchen kann verwendet werden, um anzuzeigen, dass für alle anderen Ressourcen/Dateien eine Internetverbindung erforderlich ist :

NETWORK:*

FALLBACK: (Optional)

gibt eine Fallback-Seite an, die der Browser verwendet, wenn auf die Ressource nicht zugegriffen werden kann. Jeder Datensatz in diesem Abschnitt listet zwei URIs auf – der erste stellt die Ressource dar und der zweite stellt die Fallback-Seite dar. Beide URIs müssen relative Pfade verwenden und denselben Ursprung wie die Manifestdatei haben. Es können Platzhalterzeichen verwendet werden.

Wenn im folgenden Beispiel keine Internetverbindung hergestellt werden kann, werden alle Dateien im Verzeichnis /html5/ durch „404.html“ ersetzt. 

FALLBACK:
/html5/ /404.html
Im folgenden Beispiel verwenden Sie „404.html“, um alle Dateien zu ersetzen. 

FALLBACK:*.html /404.html
So aktualisieren Sie den Cache

Es gibt drei Möglichkeiten, den Cache zu aktualisieren:

  • Manifestdatei aktualisieren

  • Durch Javascript-Operation

  • Browser-Cache leeren

Dateien zum Manifest hinzufügen oder löschen, Sie können den Cache aktualisieren, wenn Wir ändern js, ohne etwas hinzuzufügen oder zu löschen. Die Versionsnummer im Kommentar im vorherigen Beispiel kann zum Aktualisieren der Manifestdatei verwendet werden.

HTML5 führt die js-Methode zum Betrieb des Offline-Cache ein. Die folgenden js können den lokalen Cache manuell aktualisieren. 

window.applicationCache.update();
Wenn der Benutzer den Browser-Cache löscht (manuell oder mit einem anderen Tool), wird die Datei erneut heruntergeladen.

Hinweise

  • Browser haben möglicherweise unterschiedliche Kapazitätsgrenzen für zwischengespeicherte Daten (einige Browser legen ein Limit von 5 MB pro Website fest).

  • Wenn die Manifestdatei oder eine der intern aufgeführten Dateien nicht normal heruntergeladen werden kann, schlägt der gesamte Aktualisierungsvorgang fehl und der Browser verwendet weiterhin den alten Cache.

  • Der HTML-Code, der auf das Manifest verweist, muss denselben Ursprung wie die Manifestdatei haben und sich in derselben Domäne befinden.

  • Die Ressourcen in FALLBACK müssen denselben Ursprung haben wie die Manifestdatei.

  • Wenn eine Ressource zwischengespeichert wird, fordert der Browser direkt den absoluten Pfad an und greift auch auf die Ressource im Cache zu.

  • Auch wenn das Manifest-Attribut nicht für andere Seiten der Site festgelegt ist, wird auf die angeforderte Ressource aus dem Cache zugegriffen, wenn sie sich im Cache befindet.

  • Wenn sich die Manifestdatei ändert, löst auch die Ressourcenanforderung selbst eine Aktualisierung aus.

  • Für jede index.html?id=1 oder index.html?id=2 wird die index.html-Seite separat zwischengespeichert, was über den Chrome-Browser beobachtet werden kann

    Resources/Application Cache

  • Wenn Sie den Cache-Inhalt aktualisieren möchten, ändern Sie einfach die Manifestdatei, z. B. die Versionsnummer v1.0.1

  • Offline Speicher Wenn die Ressourcen aktualisiert werden, können Sie den folgenden Code zur Überwachung verwenden, aber beim ersten Laden handelt es sich immer noch um die Originalversion 

    window.applicationCache.addEventListener('updateready',function(e){
    if(window.applicationCache.status == window.applicationCache.UPDATEREADY){
         window.applicationCache.swapCache();

        if(confirm("loding new?")){
            window.location.reload()
        }
    }
},false);

Html5 引入了应用程序缓存，这意味着web应用可以进行缓存，并且可以在没有网络连接的时候进行访问。

1.1 什么是Cache Manifest

首先manifest是一个后缀名为minifest或者appcache，的文件，在文件中定义那些需要缓存的文件，支持manifest的浏览器，会将按照manifest文件的规则，像文件保存在本地，从而在没有网络链接的情况下，也能访问页面。

当我们第一次正确配置appcache后，当我们再次访问该应用时，浏览器会首先检查manifest文件是否有变动，如果有变动就会把相应的变得跟新下来，同时改变浏览器里面的appcache，如果没有变动，就会直接把appcache的资源返回，基本流程是这样的。

1.2 应用缓存的优势：

（1） 离线浏览：用户可以在应用离线时使用它们

（2） 速度更快：已缓存资源，加载得更快

（3） 减少服务器负载：浏览器只需从服务器删下载更改过或更新过的资源就可以了。

二、如何使用

有一个web应用有三个文件index.html,a.js,b.css，现在需要把js和css文件缓存起来

1.在index.html里加上<html manifest="test.manifest">

2.test.manifest清单格式如下

CACHE MANIFEST
#上面一句必须
#v1.0.0
#需要缓存的文件
CACHE:
a.js
b.css
#不需要缓存的文件
NETWORK:
*
#无法访问页面
FALLBACK:
404.html

3.manifest文件的mime-type必须是 text/cache-manifest类型
manifest文件，基本格式为三段： CACHE， NETWORK，与 FALLBACK，其中NETWORK和FALLBACK为可选项。

而第一行CACHE MANIFEST为固定格式，必须写在前面。

以#号开头的是注释，一般会在第二行写个版本号，用来在缓存的文件更新时，更改manifest的作用，可以是版本号，时间戳或者md5码等等。

CACHE:（必须）

标识出哪些文件需要缓存，可以是相对路径也可以是绝对路径。

CACHE:
a.css
http://www.php.cn/

NETWORK:（可选）

这一部分是要绕过缓存直接读取的文件，可以使用通配符＊。

下面的代码 “login.asp” 永远不会被缓存，且离线时是不可用的：

NETWORK:
login.asp

可以使用星号来指示所有其他资源/文件都需要因特网连接：NETWORK:*

FALLBACK:（可选）

指定了一个后备页面，当资源无法访问时，浏览器会使用该页面。该段落的每条记录都列出两个URI—第一个表示资源，第二个表示后备页面。两个 URI 都必须使用相对路径并且与清单文件同源。可以使用通配符。

下面的例子中，如果无法建立因特网连接，则用 “404.html” 替代 /html5/ 目录中的所有文件。

FALLBACK:
/html5/ /404.html

下面的例子中，则用 “404.html” 替代所有文件。

FALLBACK:*.html /404.html

如何更新缓存

如下三种方式，可以更新缓存：

  • 更新manifest文件

  • 通过javascript操作

  • 清除浏览器缓存

给manifest添加或删除文件，都可更新缓存，如果我们更改了js，而没有新增或删除，前面例子中注释中的版本号，可以很好的用来更新manifest文件。

html5中引入了js操作离线缓存的方法，下面的js可以手动更新本地缓存。

window.applicationCache.update();

如果用户清除了浏览器缓存（手动或用其他一些工具）都会重新下载文件。

注意事项

  • 浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。

  • 如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程都将失败，浏览器继续全部使用老的缓存。

  • 引用manifest的html必须与manifest文件同源，在同一个域下。

  • FALLBACK中的资源必须和manifest文件同源。

  • 当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。

  • 站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问。

  • 当manifest文件发生改变时，资源请求本身也会触发更新。

  • 对于每个index.html?id=1或index.html?id=2都会分别缓存index.html页面，可以通过chrome浏览器Resources/Application Cache观察

  • 如果想更新缓存内容，只要修改下manifest文件即可，如改版本号v1.0.1

  • 离线存储如果资源有更新，可以通过如下代码来监听，但第一次加载还会是原来的版本

    window.applicationCache.addEventListener('updateready',function(e){
    if(window.applicationCache.status == window.applicationCache.UPDATEREADY){
         window.applicationCache.swapCache();

        if(confirm("loding new?")){
            window.location.reload()
        }
    }
},false);

 以上就是html5的离线缓存的内容，更多相关内容请关注PHP中文网（www.php.cn）！


Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：HTML5-domänenübergreifende Kommunikation postMessageNächster Artikel：HTML5-domänenübergreifende Kommunikation postMessage

In Verbindung stehende Artikel

Mehr sehen