H5应用程序缓存浅谈及实际测试

应用程序缓存能做什么？

可以在脱离网络的条件下离线访问。
减少读取服务器文件，减轻服务器的访问压力。
优化网站打开速度。

如何启用应用缓存？

第一步：给服务器添加新的MIME：扩展名：.appcache MIME类型：text/cache-manifest

第二步：创建appcache文件：

appcache文件可以看作缓存规则配置文件。appcache文件内可以定义需要缓存的文件列表、不缓存的文件列表、及文件不存在时时的替补资源。

appcache文件分成三部份：

CACHE: #设置需要缓存的资源
NETWORK: #设置不缓存的资源，该资源在离线时不可用
FALLBACK: #规定如果无法建立因特网连接时，用指定的资源替换

appcache文件示例，比如将此文件保存到网站根目录路径：/manifest/article_lists.appcache

 CACHE MANIFEST

 # 井号用来注释

 # CACHE表示需要缓存的文件

 # CACHE不支持  * 号

 CACHE:

 about.html

 video.html

 css/css.css

 js/common.js

 # NETWORK 表示不缓存的文件，离线时是不可用的

 NETWORK:

 login.asp

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

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

 FALLBACK:

 /html5/ /404.html

appcache文件注意事项：

列表清单支持相对路径和绝对路径。
资源名称尽量不要使用汉字、空格等特殊文件。

第三步：主页面引入appcache文件，一旦打开该页面的同时会缓存appcache指定的文件。

比如主页面名为：article_lists.html，其引入方式如下：

 <!DOCTYPE html>

 <!-- appcache文件路径可以是相对，也可以是绝对路径-->

 <html manifest="/manifest/article_lists.appcache">

注意细节：

执行文件(比如 article_lists.html)，虽然不在缓存列表内，但仍然会被缓存。
浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。
查看资源是否被缓存，可以在浏览器按F12键，在console内查看
文件引用缓存文件时，一定要区分大小写！
比如：缓存列表内缓存css/css.css 资源，全是小写状态。则执行时会将该文件下载到本机。
而离线html文件想要加载该css文件用了大写文件名时会显示出错，是因为离线匹配缓存文件是区分大小写。
也就是说： css.css 资源是被缓存了，但离线文件引用该缓存资源时未能正确的匹配大小写状态，导致无法正确加载该CSS样式。

 <!DOCTYPE HTML>

 <html manifest="/learn/h5/h5.appcache">

 <head>

 <title>H5 简明教程</title>

 <!-- 由于appcache内缓存的文件名是小写的：css/css.css  而这里引用了大写的Css/css.css导致无法获取该资源的缓存 -->

 <link rel="stylesheet" type="text/css" href="Css/css.css" />

1、如果要缓存一个html页面，一定同时要缓存该文件所关联的所有资源列表，包括css、js、图片、文件等。

2、强制更新缓存，可以编辑appcache文件，比如修改注释。

巴特西