验证html5离线应用在线升级（更新中）

前提参见：

tomcat7下部署的firefox离线应用搭建

更新缓存

应用程序可以等待浏览器自动更新缓存，也可以使用 Javascript 接口手动触发更新。

>自动更新

浏览器除了在第一次访问 Web 应用时缓存资源外，只会在 cache manifest 文件本身发生变化时更新缓存。而 cache manifest 中的资源文件发生变化并不会触发更新。

>手动更新

开发者也可以使用 window.applicationCache 的接口更新缓存。方法是检测 window.applicationCache.status 的值，如果是 UPDATEREADY，那么可以调用 window.applicationCache.update() 更新缓存。示范代码如下。

 

1、  每次加载，浏览器自动更新验证：

 

在clock.js中加入window.applicationCache的onnoupdate回调注册，

     window.applicationCache.onnoupdate = function() {

         //没有更新

         alert('onnoupdate new version!');

};

 

F5每次刷新都会触发该函数，表示浏览器是进行了manifest appcach的对比

 

 

2、  学会使用手动更新

手动更新的意义，类似与电子邮件的应用长期后台运行，需要设定为定期从服务器（比如以每天为单位）获取一些更新，这个时候手动更新的便利性体现出来了。

 

这个时候我们就要关注manifestappcach的书写标准了

#version就是进行版本对比的依据（但不一定是唯一的，这个还不是很清楚），

 

同时我们修改clock.js进行onupdateready的回调注册

    window.applicationCache.onupdateready =function() {

        //第二次载入，如果manifest被更新

        //在下载结束时候触发

        //不触发onchched

        alert("本地缓存正在更新中。。。");

        if(confirm("是否重新载入已更新文件")) {

            window.applicationCache.swapCache();

            location.reload();

        }

};

 

该函数当更新缓存成功以后，强制进行swapCache操作。

 

setTimeout(function(){

        window.applicationCache.update();

}, 20000);

 

 

第一次正常加载网页，然后在20秒之内立即修改2个文件

(经过实验目前发现只要version中的值有变化就会触发onupdateready事件)

 

修改HTML文件上的任意元素

当二十秒到了以后，提示是否需要缓存并生效

一路按“确定”

 

内容发生了变化(原图与变化后的对比如下)

 

 

 

本文示例代码下载地址：

验证html5应用在线升级DEMO_new