Web 离线缓存Manifest

最近在做缓存更新优化，正好回顾下有关浏览器缓存的知识。

一、什么是离线缓存（Application Cache）？

HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来了三个优势：
　　1、离线浏览 - 用户可在应用离线时使用它们
　　2、速度 - 已缓存的资源直接使用缓存在本地的文件，速度更快
　　3、减少服务器负载均衡 - 只有当缓存清单文件（manifest文件）发生变化时，才重新更新缓存文件
　　浏览器支持情况：
　　　　所有主流浏览器均支持应用程序缓存，除了 Internet Explorer。

二、怎么使用离线缓存技术？

使用离线缓存（Application Cache）大致分为三步：
1. 必须在Web服务器上配置正确的 MIME-type，即“text/cache-manifest”。
2. 必须创建Manifest文件，建议将文件的扩展名写为“.appcache”。
3. 在html文件的html标签上配置manifest属性。（文档类型最好为 !DOCTYPE HTML）
Manifest文件的格式如下：

　　CACHE MANIFEST
　　CACHE

　　manifest.html
　　manifest.js

　　NETWORK
　　*

　　FALLBACK
　　/html5/  /404.html

　　

 

　　其中：第一行的CACHE MANIFEST，是必需的；
　　CACHE 下面是要缓存的文件列表；
　　NETWORK 下的文件表示都比需通过网络请求得到；（支持通配符*）
　　FALLBACK 表示当前面的文件没有请到时（404），则使用后面的文件来代替前面的文件。
　　在Manifest文件中，以“#”开头的表示是注释行，但是也有其他用途。
　　由于Manifest文件发生变化时，哪怕是注释发生变化时，浏览器都将会更新应用缓存。

三、缓存会更新的情况

1. 第一次进入应用程序时，会自动将Manifest文件中的文件缓存下来；
2. 当Manifest文件发生变化，哪怕是注释发生变化，都会更新应用程序缓存；
　　注意：当Manifest文件清单中文件（不是Manifest文件本身）发生变化时，如果Manifest文件未发生变化，是不会更新应用程序缓存的。
3. 用户手动清空缓存后。

四、应用程序缓存的事件

首先看下面一个段代码，这是一个注册了applicationCache的一些事件：

// 开始检查缓存是否有更新，加载 manifest 文件
applicationCache.onchecking = function() {
    console.log('onchecking');
};
// 缓存开始加载，创建或更新缓存过程中都有此事件
applicationCache.ondownloading = function(){
    console.log('ondownloading');
}
// 缓存加载进度，创建或更新缓存过程中都有此事件
applicationCache.onprogress = function(e){
    // 事件对象 e 中，有个loaded，total属性，可以使用这两个属性来实现缓存跟新进度条的功能
    console.log('onprogress');
}
// 第一次缓存完成，即创建缓存完成
applicationCache.oncached = function(){
    console.log('oncached');
}
// 缓存更新完毕，创建缓存过程无此事件
applicationCache.onupdateready = function() {
    console.log('onupdateready');
}
// 缓存已是最新的，不需要更新
applicationCache.onnoupdate = function() {
    console.log('onnoupdate');
}
// 出错，如加载 manifest 失败
applicationCache.onerror = function() {
    console.log('onerror');
}

 

由于存在 progress事件，并且改事件的事件对象event中有两个很有意思的属性，loaded 和 total；
其中loaded表示加载了多少个文件，total表示要加载的文件总数；
利用这样两个属性，当有缓存过度页面时，我们可以创建一个缓存更新的进度条，更直观的感觉到缓存更新的进度。

五、一些注意事项

• 对于浏览器来说,manifest的加载是要晚于其他资源的. 这就导致check manifest的过程是滞后的；
• manifest文件发生变化时，会跟新文件，但现在使用的还是已过期的缓存文件；
• manifest文件的扩展名建议命名为“.appcache”，且格式必须为UTF-8编码；
• manifest文件必须与引入它的页面同源，备用项和备用名称空间,必须与当前的manifest同源；
• 白名单（NETWORK）使用通配符”*”， 则会进入白名单的open状态.，这种状态下，所有不在相关Cache区域出现的url都默认使用HTTP相关缓存头策略；
• 应用程序缓存容量是有大小的限制的，一般为5M；
• 当manifest文件或者是被缓存的文件下载失败（404）时，则整个更新过程会失败，还会继续使用上次的缓存；
• 只有当manifest文件本身发生变化时，才会更新缓存；当只有被缓存的文件发生变化而manifest文件没有变化时，应用程序缓存是不会更新的；