html5判断是否离线,js前端开发—离线应用篇—离线检测和应用缓存

参考资料

前言

本人菜鸟，入IT只为当鼓励师。本编文章主要介绍 如何判断设备是在线还是离线 (navigator.onLine 属性，online和offline事件)，如何实现应用缓存(描述文件，的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开发人员(设置)——>脱机工作”才能让浏览器正常工作。

判断设备是否能上网

你现在的状态是