23.1 离线检测

开发离线应用的第一步是要知道设备是在线还是离线，HTML5为此定义了一个navigator.onLine属性，这个属性值为true 表示设备能上网，值为false 表示设备离线。这个属性的关键是浏览器必须知道设备能否访问网络，从而返回正确的值。实际应用中，navigator.onLine 在不同浏览器间还有些小的差异。

• IE6+和Safari 5+能够正确检测到网络已断开，并将navigator.onLine 的值转换为false。
• Firefox 3+和Opera 10.6+支持navigator.onLine 属性，但你必须手工选中菜单项“文件 → Web开发人员（设置）→ 脱机工作”才能让浏览器正常工作。
• Chrome 11 及之前版本始终将navigator.onLine 属性设置为true。这是一个有待修复的bug①。

① 这个bug 在2011 年10 月已被修复（http://code.google.com/p/chromium/issues/detail?id=7469）

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

if (navigator.onLine) {
//正常工作
} else {
//执行离线状态时的任务
}

运行一下 除navigator.onLine 属性之外，为了更好地确定网络是否可用，HTML5 还定义了两个事件：online 和offline。当网络从离线变为在线或者从在线变为离线时，分别触发这两个事件。这两个事件在window 对象上触发。

EventUtil.addHandler(window, "online",
function() {
alert("Online");
});
EventUtil.addHandler(window, "offline",
function() {
alert("Offline");
});

运行一下 为了检测应用是否离线，在页面加载后，最好先通过navigator.onLine 取得初始的状态。然后，就是通过上述两个事件来确定网络连接状态是否变化。当上述事件触发时，navigator.onLine 属性的值也会改变，不过必须要手工轮询这个属性才能检测到网络状态的变化。 支持离线检测的浏览器有IE 6+（只支持navigator.onLine 属性）、Firefox 3、Safari 4、Opera 10.6、Chrome、iOS 3.2 版Safari 和Android 版WebKit。