JavaScript 离线应用与客户端存储——“应用缓存”的注意要点

离线检测

HTML5中定义的:

navigator.onLine如果为true则表示设备能够上网 注意是大写的LonLine);

用下面代码检测属性状态:

if (navigator.onLine) {
    // statement if online
} else {
    // statement if offline
}

另外:

window.onlinewindow.offline两个事件

HTML5提供了这两个事件,会在网络状态变化时触发。online在网络由离线变为在线时触发;offline在网络由在线变为离线时触发。

EventUtil.addHandler(window, "online", function() {
    document.getElementById("status").innerHTML = "在线";
});
EventUtil.addHandler(window, "offline", function() {
    document.getElementById("status").innerHTML = "离线";
});

应用缓存(appcache)

appcache就是一个从浏览器的缓存中分出来的缓存去,在缓存中保存数据,可以使用一个描述文件(manifest file),列出要下载和缓存的资源。

描述文件文件名:

offline.manifest

描述文件内容:

CACHE MANIFEST
#Comment

file.js
file.css

然后与页面关联起来,在html标签中的manifest属性中指定这个文件路径:

<html lang="en" manifest="/offline.manifest">

另外,applicationCache.status会返回下面的常量:

  • 0:无缓存

  • 1:闲置

  • 2:检查中

  • 3:下载中

  • 4:更新完成

  • 5:废弃

应用缓存相关的事件:

  • checking:检查缓存更新时;

  • error:检查更新或下载资源时发声错误

  • noupdate:描述文件无变化

  • downloading:开始下载应用缓存资源

  • progress:下载缓存资源过程中

  • updateready:下载完毕

  • cached:应用缓存完整可用时

让应用缓存为检查更新而触发上述事件:

applicationCache.update();
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值