web离线应用前提之离线检测

Posted 2020-11-26 hellomryk

离线web应用就是，设备不能上网情况下仍可以运行的应用。

    开发离线应用需要几个步骤，首先确保知道设备能否上网，以便下一步执行正确的操作。然后应用还能访问一定的资源（图像，css，js），之后这样才能正常工作，最后必须有一块本地空间用于保存数据，无论能否上网都不影响读写。

离线检测：navigator.onLine属性，true表示能上网，false表示设备离线。

支持的浏览器 ie6+，Safari5+，chorme11+ 都已经支持

firefox3+ 和opera10.6+ 支持navigator.online属性，但你必须勾选，菜单项-》web 开发人员（设置）-》脱机工作 才能让浏览器正常工作。

由于存在兼容问题，单独使用navigator.online属性不能确定网络是否连通，即便如此，在请求发生错误的情况下。检测这个属性仍然管用。实例如下：

if（navigator.online）{
    //正常工作
} else {
    //执行离线状态时的任务
}

除了navigator.online 属性之外，为了更好的确定网络是否可用，html5还定义了两个事件：online 和offline,当网络从离线变为在线时，或从在线变为离线时候触发：

EventUtil.addHandler(window,‘online‘,function() {
    alert(‘online‘)
})

EventUtil.addHandler(window,‘offline‘,function() {
    alert(‘offline‘)
})

扫码加群，每日更新一篇前端技术文章一起成长。