HTML5应用缓存配置

来源：互联网发布：雷盾网络验证编辑：程序博客网时间：2024/06/16 20:45

HTML5应用缓存可以把页面、图片、js文件、css文件等缓存到用户本地的磁盘上，可以提高用户访问速度，也可以建立离线应用。

HTML5应用缓存的配制方法如下：

1、首先要保证你的页面是HTML5的

<!DOCTYPE HTML>

2、在服务器上创建缓存清单文件，用于列出要缓存的文件清单

文件的后缀名设为.appcache。

3、在服务器上配置正确的mime-type，让服务器能识别后缀名是.appcache的文件

下面以tomcat服务器为例：

打开服务器conf文件夹下的web.xml文件（注意不是项目里的web.xml文件），在如下的许多标签之后

<mime-mapping>  ...</mime-mapping>

加上

<!--html5 mime-type setting -->    <mime-mapping>        <extension>appcache</extension>        <mime-type>text/cache-manifest</mime-type>    </mime-mapping><!--html5 mime-type setting -->

之后要记得重启服务器。

4、在页面的html标签里加上manifest属性，属性值是.appcache文件的路径（路径为项目运行时的绝对路径或相对路径，保险起见最好用绝对路径）

<html manifest="/demo.appcache">

5、下面配置.appcache文件

你可以先在页面显示一个图片

<!DOCTYPE html><html manifest="/demo.appcache">   <body>      <p><img src="gg1.gif" /></p>      <p><img src="gg2.gif" /></p>   </body></html>

在.appcache文件中输入如下内容

CACHE MANIFEST # 2012-02-21 v1.0.0 CACHE:gg1.gifgg2.gifNETWORK:*FALLBACK:/html5/  /404.html

其中CACHE MANIFEST是必须写的头标记，#号后所在的一行是注释行

CACHE: 后面列出的文件路径是要缓存的文件路径，文件路径可以是.appcache文件文件的相对路径

NETWORK: 后面列出的是不需要缓存的文件，该项可以用通配符*，表示指定位置的所有文件。

FALLBACK:规定如果无法建立因特网连接，则用 "404.html" 替代 /html5/ 目录中的所有文件

6、文件配置完后，在火狐浏览器中按如下操作，查看是否有自己项目对应ip或域名，若存在，并且后面缓存大小不为0，则证明缓存应用建立成功。

或者在加载一遍页面后，让浏览器断开与服务器的连接（关闭服务器或者把连接服务器的网断开），清空浏览器缓存（注意：不是清空本地缓存），然后再刷新页面，若图像仍然显示，则表示已经建立应用缓存。

如果没有达到预期效果，很大的一部分可能是因为路径有问题，把html里的缓存清单文件路径和缓存清单文件里的文件路径仔细检查一下看看有没有错误。

7、应用缓存纯在缺陷

应用缓存的工作原理是：

用户第一次加载页面时，会把配置了缓存清单的页面也加载进来，并且把缓存清单里指定要缓存的文件下载到本地硬盘里。

用户以后再次访问该网页时，会先用本地的缓存清单与服务器上的对照，若没有改变，则不更新缓存文件，反之则要在用户再一次刷新页面时更新缓存清单和缓存文件。

解决方法：

首先，当后台需要缓存的文件发生变动时，要及时修改缓存清单的信息，如果缓存清单信息不需要修改，可以修改缓存清单里注释的内容，比如注释中写的日期。

然后再要缓存的页面中加入如下js代码，保证页面及时更新，不用手动刷新第二次

//检测是否有新的缓存在页面加载window.addEventListener('load', function(e) {  window.applicationCache.addEventListener('updateready', function(e) {  //判断.appcache是否变更    if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {      // 浏览器下载一个新的应用缓存      window.applicationCache.swapCache();      // 本地更新应用缓存并从新加载页面，获取新的页面信息      window.location.reload();    } else {      //.appcache清单没有改变， 对服务器没有新的请求    }  }, false);}, false);

0 0