canvas教程

HTML5 的 applicationCache 应用程序缓存离线存储功能与 manifest 文件(2)

字号+ 作者:H5之家 来源:H5之家 2017-05-31 08:04 我要评论( )

注: 该设置是为了防止在不支持 applicationCache 功能的浏览器上浏览时,浏览器不知道该文件的格式而可能造成作为附件下载。 在支持 HTML5 该功能的浏览器上,一般可以正确的对该文件识别并判断,并不需要服务器强

注:
该设置是为了防止在不支持 applicationCache 功能的浏览器上浏览时,浏览器不知道该文件的格式而可能造成作为附件下载。
在支持 HTML5 该功能的浏览器上,一般可以正确的对该文件识别并判断,并不需要服务器强制解析该文件类型。

二. 注意的问题

1. 关于文件的更新

只有当 .manifest 文件变动,缓存文件才会重新更新并缓存。所以动态页面是不宜缓存的。而且当浏览器检测到该文件发生了更新时,会触发一系列事件监听函数,并异步地更新缓存,而当前页显示的依然是历史缓存内容,所以在此刷新时才能浏览最新的内容。

1. 缓存当前页问题

一般我们只需要对不更新或很少更新的文件进行缓存,对于动态更新的页面是不提倡缓存的。
对于加载 manifest 的当前页面,浏览器会默认缓存,这会造成一个问题:
如果当前页为动态更新的页面,那么如果 manifest 文件不更新,则当面页面也就会一直被缓存,那么页面的动态更新就无法获知了。

这在HTML5 相关文档里并没有直接的解决方案,其解释是这是必须而安全的。
如果我们只是想通过当前缓存静态文件,那么我们该如何处理该问题呢?

一个可行的解决方法是添加 iframe ,那么 iframe 会一直缓存(直到 manifest 变化后更新),当前页则一直是动态的。

 

2. 大小限制问题

浏览器对缓存数据的容量限制可能不太一样(某些浏览器设置的限制是每个站点 5MB)
这一点并没有在多浏览器上作严格测试,对于 HTML5 的 本地存储 localStorage 大小限制的测试可参考这里:

HTML5 本地存储 localStorage:

不过,如果你编写的是针对 Chrome 网上应用店的应用,可使用 unlimitedStorage 取消该限制。

三. 相关状态监控函数参考

当浏览器检测到 .manifest 文件发生变动时,浏览器会异步的对缓存文件更新,而当前显示的依然是历史缓存内容,那么需要再次刷新才能浏览到最新的页面。但是浏览器会触发事件监听函数,我们可以通过这些事件监听函数进行适当的应用处理。
当前 HTML5 的 applicationCache 支持的监听函数有如下几种,适当的定义这些函数即可对离线应用的更新流程及应用的处理进行控制。
// 定义离线缓存的事件监听
function deAppCacheHandler(){
if(! applicationCache ) return;

//信息提示
function msgTips(msg){
$('.longMsg .label-info').html(msg);
console.log(msg);
}

applicationCache.onchecking = function(){
//检查manifest文件是否存在
msgTips('正在检测离线缓存配置...');
//return false;
};

applicationCache.ondownloading = function(){
//检查到有manifest或者manifest文件
//已更新就执行下载操作
//即使需要缓存的文件在请求时服务器已经返回过了
msgTips('本地缓存正在更新中...');
window.precesscount = 0; //用于进度计算
return false;
};

applicationCache.onnoupdate = function(){
//返回304表示没有更新,通知浏览器直接使用本地文件
msgTips('您使用的是最新版本');
setTimeout(function(){
msgTips('');
}, 5000);
return false;
};

applicationCache.onprogress = function(e){
//下载的时候周期性的触发,可以通过它
//获取已经下载的文件个数
var precess = '';
if(e & e.lengthComputable){
precess = ' ' + Math.round(100 * e.loaded / e.total) + '%'
}else{
window.precesscount += 1;
precess = '(' + window.precesscount + ')';
}
msgTips('本地缓存正在更新中... ' + precess);
return false;
};

applicationCache.oncached = function(){
//下载结束后触发,表示缓存成功
msgTips('全部离线内容缓存成功!');
return false;
};

applicationCache.onupdateready = function(){
//第二次载入,如果manifest被更新
//在下载结束时候触发
//不触发onchched
/*/alert("本地缓存正在更新中。。。");
if(confirm("是否重新载入已更新的文件?")){
applicationCache.swapCache();//弃用旧的缓存文件
location.reload();
}//*/
msgTips('已有新版本,请刷新页面载入');
applicationCache.swapCache();//弃用旧的缓存文件
return false;
};

applicationCache.onobsolete = function(){
//未找到文件,返回404或者401时候触发
msgTips('离线缓存功能已删除');
return false;
};

applicationCache.onerror = function(){
//其他和离线存储有关的错误
msgTips('无法访问离线配置文件');
return false;
};

window.onoffline = function(){
msgTips('离线状态');
return false;
};
}

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5教程(使用HTML5设计网络富客户端应用)

    HTML5教程(使用HTML5设计网络富客户端应用)

    2017-05-30 14:00

  • HTML5 本地存储 localStorage、sessionStorage 的遍历、存储大小限制处理

    HTML5 本地存储 localStorage、sessionStorage 的遍历、存储大小限制

    2017-05-30 13:03

  • Html5 canvas 钟表

    Html5 canvas 钟表

    2017-05-30 11:03

  • 如何用HTML5 CANVAS绘制阴影和填充模式

    如何用HTML5 CANVAS绘制阴影和填充模式

    2017-05-29 18:05

网友点评
F