js前端开发—离线应用篇—离线检测和应用缓存

2017-03-09 本文已影响0人 BeYanJin

参考资料

《Javascript高级层序设计》(第3版)
JavaScript | MDN
HTML5系列之——applicationCache对象

前言

本人菜鸟，入IT只为当鼓励师。本编文章主要介绍如何判断设备是在线还是离线（navigator.onLine 属性，online和offline事件），如何实现应用缓存（描述文件，<html>的mainfest属性，applicationCache对象）。

一、什么是离线Web应用

离线Web应用，就是在设备不能上网的情况下仍然可以运行的应用。
离线Web应用是 HTML5 新增的一个重点技术。

二、开发离线应用的条件

能够判断出设备是在线还是离线
能够访问一定的资源（css、JavaScript、图像等）
必须有一块本地（客户端）空间用于保存数据

三、使用HTML5开发离线应用

1. 离线检测

1.1 navigator.onLine 属性

为了判断设备是否在线，HTML5 定义了一个 navigator.onLine 属性
navigator.onLine 是一个只读属性，它返回一个 Boolean 值：
true —— 表示设备能上网，即设备在线；
false —— 表示设备离线。
下面这段代码能在IE6+和Safari 5+正常执行；在Chrome11及之前的版本中，navigator.onLine 的值始终为 true，但早在2011年10月出的新版就已经解决了这个bug。Firefox 4 + 和 Opera 11.10 +，支持该属性，但必须手工选中菜单项“文件——>Web开发人员（设置）——>脱机工作”才能让浏览器正常工作。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>判断设备是否能上网</title>
</head>
<body>
    <p>你现在的状态是 <script>document.write(navigator.onLine ? "在线" : "离线");</script></p>
</body>
</html>

各个浏览器对 navigator.online 的兼容性

1.2 online 和 offline 事件

为了更好的确定网络是否可用，HTML5还定义了两个事件：online 和 offline。
online 事件：当网络从离线变为在线时触发；（IE9+浏览器支持）
offline 事件：当网络从在线变为离线时触发。（IE9+浏览器支持）
这两个事件在window对象上触发。
为了检测应用是否离线，在页面加载后，最好先通过 navigator.onLine 取得初始的状态，然后通过上述两个事件来确定网络连接状态是否变化。下面代码是实现兼容性最优的方案。
代码中用到 EventUtil.js 文件，它提供了一个兼容所有浏览器的事件绑定对象。可点击蓝色字体从我的github中下载该文件。

<!DOCTYPE html>
<html>
<head>
    <title>Online Events Example</title>
<script type="text/javascript" src="EventUtil.js"></script>
</head>
<body>
    <p>你现在的状态是 <span id="status"><script>document.write(navigator.onLine ? "在线" : "离线");</script></span></p>
    <script>
        EventUtil.addHandler(window, "online", function(){
            document.getElementById("status").innerHTML = "在线";
        });
        EventUtil.addHandler(window, "offline", function(){
            document.getElementById("status").innerHTML = "离线";
        });
    </script>
</body>
</html>

各种兼容性问题

2. 应用缓存

HTML5的应用缓存，简称为appcache。Appcache就是从浏览器的缓存中分出来的一块缓存区。可以使用一个描述文件（manifest file），列出要下载和缓存的资源，这样就能在这个缓存中保存数据了。

2.1 检测浏览器是否支持应用缓存

if (window.applicationCache) {
    //浏览器支持离线应用
}

2.2 描述文件

描述文件用来列出需要缓存和不需要缓存的资源，以备离线时使用。
描述文件的扩展名以前用.manifest，现在推荐使用.appcache，并且描述文件需要配置正确的MIME-type，即"text/cache-manifest"，必须在web服务器上进行配置（文件编码必须是UTF-8）。
具体格式：

2.3 将描述文件和页面关联

<html manifest='./offline.appcche'>

2.4 window.applicationCache 对象

2.4.1 status属性

applicationCache 有一个 status 属性，属性值是常量：

2.4.2 可绑定在applicationCache对象上的事件

applicationCache 还有很多相关的事件：

2.4.3 update() 方法

applicationCache 对象的 update() 方法：
通过update()方法也可以手工干预，让应用缓存为检查更新而触发上述事
```
 applicationCache.update();
```

update()一经调用，应用缓存就会去检查描述文件是否更新，触发checking事件，然后页面就会像刚刚加载一样，继续执行后续操作。如果触发了cached事件，则说明应用缓存已经准备就绪，不会再发生其他操作。

2.4.4 swapCache()方法

如果触发了updateready事件，则说明新版本的应用缓存已经可用，需要调用swapCache()方法来启用新的应用缓存。

applicationCache.onupdateready = function(){
    applicationCache.swapCache();
};

2.4.5 注意事项

浏览器检查清单文件，以及更新缓存的操作是异步的，因此可能是在载入旧缓存之后进行，因此可能需要载入两次才能显示最新的内容，因此需要提示用户。

window.applicationCache.onupdateready = function(){
    var con = comfirm('有新内容可用，是否重新加载？');
    if(con){
        location.reload();
    }
}