验证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 

 

 

posted @ 2012-06-04 22:09  汀州の夜  阅读(283)  评论(0编辑  收藏  举报