Html5 introduit la mise en cache des applications, ce qui signifie que les applications Web peuvent être mises en cache et accessibles lorsqu'il n'y a pas de connexion réseau.

1.1 Qu'est-ce que le manifeste de cache

Tout d'abord, le manifeste est un fichier avec le suffixe minifest ou appcache, dans lequel les fichiers qui doivent être mis en cache sont définis. qui prennent en charge manifest , le fichier sera enregistré localement selon les règles du fichier manifeste, afin que la page soit accessible sans lien réseau.

Lorsque nous configurons correctement appcache pour la première fois, lorsque nous accédons à nouveau à l'application, le navigateur vérifiera d'abord s'il y a des modifications dans le fichier manifeste. S'il y a des modifications, les modifications correspondantes seront mises à jour. en même temps, modifiez l'appcache dans le navigateur s'il n'y a pas de changement, les ressources appcache seront renvoyées directement. Le processus de base est comme ceci.

1.2 Avantages de la mise en cache des applications :

(1) Navigation hors ligne : les utilisateurs peuvent utiliser des applications lorsqu'ils sont hors ligne

(2) Plus rapide : les ressources mises en cache se chargent plus rapidement

(3) Réduisez la charge du serveur : le navigateur n'a besoin que de télécharger les ressources modifiées ou mises à jour depuis le serveur.

2. Comment utiliser

Il existe une application web avec trois fichiers index.html, a.js, b.css Il faut maintenant mettre en cache les fichiers js et css

1. Ajoutez

<html manifest="test.manifest">

à index.html 2. Le format du manifeste

est le suivant test.manifest

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

Copier après la connexion

3. Le type MIME du fichier manifeste doit être

type text/cache-manifestFichier manifeste, le format de base est composé de trois sections : CACHE, NETWORK et FALLBACK, dont NETWORK et FALLBACK sont facultatifs.

La première ligne de CACHE MANIFEST est dans un format fixe et doit être écrite devant.

Les commentaires commençant par # sont généralement écrits avec un numéro de version sur la deuxième ligne, qui est utilisé pour modifier le rôle du manifeste lorsque le fichier mis en cache est mis à jour. Il peut s'agir d'un numéro de version, d'un horodatage ou d'un code md5. , etc. attendez.

CACHE : (obligatoire)

Identifie les fichiers qui doivent être mis en cache, qui peuvent être un chemin relatif ou un chemin absolu.

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

Copier après la connexion

RÉSEAU : (facultatif)

Cette partie est le fichier à lire directement, en contournant le cache, vous pouvez utiliser le caractère générique *.

Le code suivant "login.asp" ne sera jamais mis en cache et n'est pas disponible hors ligne :

NETWORK:
login.asp

Copier après la connexion

Un astérisque peut être utilisé pour indiquer que toutes les autres ressources/fichiers sont requis. Connexion Internet :

NETWORK:*

FALLBACK : (Facultatif)

spécifie une page de secours que le navigateur utilisera lorsque la ressource est inaccessible. Chaque enregistrement de cette section répertorie deux URI : le premier représente la ressource et le second représente la page de secours. Les deux URI doivent utiliser des chemins relatifs et avoir la même origine que le fichier manifeste. Des caractères génériques peuvent être utilisés.

Dans l'exemple suivant, si une connexion Internet ne peut pas être établie, tous les fichiers du répertoire /html5/ sont remplacés par "404.html".

FALLBACK:
/html5/ /404.html

Copier après la connexion

Dans l'exemple suivant, utilisez « 404.html » pour remplacer tous les fichiers.

FALLBACK:*.html /404.html

Copier après la connexion

Comment mettre à jour le cache

Il existe trois façons de mettre à jour le cache :

Mettre à jour le fichier manifeste
Grâce à l'opération javascript
Vider le cache du navigateur

Ajouter ou supprimer des fichiers à manifester, vous pouvez mettre à jour le cache, si nous modifions js sans ajouter ni supprimer. Le numéro de version dans le commentaire de l'exemple précédent peut être utilisé pour mettre à jour le fichier manifeste.

HTML5 introduit la méthode js pour faire fonctionner le cache hors ligne. Les js suivants peuvent mettre à jour manuellement le cache local.

window.applicationCache.update();

Copier après la connexion

Si l'utilisateur efface le cache du navigateur (manuellement ou à l'aide d'un autre outil), le fichier sera à nouveau téléchargé.

Remarques

Les navigateurs peuvent avoir des limites de capacité différentes pour les données mises en cache (certains navigateurs fixent une limite de 5 Mo par site).
Si le fichier manifeste ou l'un des fichiers répertoriés en interne ne peut pas être téléchargé normalement, l'ensemble du processus de mise à jour échouera et le navigateur continuera à utiliser l'ancien cache.
Le code HTML qui référence le manifeste doit avoir la même origine que le fichier manifeste et être dans le même domaine.
Les ressources dans FALLBACK doivent avoir la même origine que le fichier manifeste.
Lorsqu'une ressource est mise en cache, le navigateur demande directement le chemin absolu et accède également à la ressource dans le cache.
Même si l'attribut manifeste n'est pas défini pour les autres pages du site, la ressource demandée sera accessible depuis le cache si elle est dans le cache.
Lorsque le fichier manifeste change, la demande de ressource elle-même déclenchera également une mise à jour.
Pour chaque index.html?id=1 ou index.html?id=2, la page index.html sera mise en cache séparément, ce qui peut être observé via le navigateur Chrome
Resources/Application Cache
Si vous souhaitez mettre à jour le contenu du cache, modifiez simplement le fichier manifeste, par exemple en changeant le numéro de version v1.0.1

Hors ligne stockage Si les ressources sont mises à jour, vous pouvez utiliser le code suivant pour surveiller, mais le premier chargement sera toujours la version originale

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

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

Copier après la connexion

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

Copier après la connexion

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/

Copier après la connexion

NETWORK:（可选）

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

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

NETWORK:
login.asp

Copier après la connexion

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

FALLBACK:（可选）

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

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

FALLBACK:
/html5/ /404.html

Copier après la connexion

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

FALLBACK:*.html /404.html

Copier après la connexion

如何更新缓存

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

更新manifest文件
通过javascript操作
清除浏览器缓存

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

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

window.applicationCache.update();

Copier après la connexion

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

注意事项

浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 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);

Copier après la connexion

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