参考资料
《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();
}
}
网友评论