如果 Web 应用程序仅仅是一些静态页面的组合，那么通过 Cache Manifest 缓存资源文件以后就可以支持离线访问了。但是随着互联网技术的快速发展，特别是 Web 2.0 概念流行以来，用户提交的数据渐渐成为互联网的主流。
在开发支持离线的 Web 应用时，就不能仅满足于静态页面的展现，还必须考虑如何让用户在离线状态下也可以操作数据。离线状态时把数据存储在本地；在线状态以后再把数据同步到服务器上。为了做到这一点，开发者首先必须知道浏览器是否在线。
navigator.onLine 属性表示当前是否在线，它的值是一个布尔类型。值为 true 时表示在线；值为 false 时表示离线。当网络状态发生变化时， navigator.onLine 的值也随之变化，因此开发者可以通过读取它的值获取网络状态。
当然， onLine 值为 true 并不能保证 Web 应用程序在用户的机器上一定能访问到相应的服务器。而当其值为 false 时，不管浏览器是否真正联网，应用程序都不会尝试进行网络连接。
查看页面状态是在线还是离线的代码如下
/** 当页面加载时，设置状态为 online 或者 offline */
function loadDemo() {
if (navigator.onLine) {
log('Online');
} else {
log('Offline');
}
}
/** 增加事件监听，当在线状态发生变化时，将触发响应 */
window.addEventListener(
'online',
function (e) {
log('Online');
},
true,
);
window.addEventListener(
'offline',
function (e) {
log('Offline');
},
true,
);
开发离线应用时通过 navigator.onLine 获取网络状态通常是不够的，开发者还需要在网络状态发生变化时立刻得到通知， HTML 5 提供了 online 和 offline 事件。
当在线或离线状态切换时，所对应的 online 或 offline 事件将触发在 body 元素上，并且沿着 document.body 、 document 和 window 的顺序冒泡。因此，开发者可以通过监听它们的 online 事件和 offline 事件来获取网络状态。
不同的浏览器检测在线还是离线状态时的表现并不是一致的。
在支持 HTML 5 的浏览器中， window 对象有一个 applicationcache 属性，通过 window.applicationcache 可以获得一个 DOMApplicationCache 对象，这个对象来自 DOMApplicationCache 类，这个类有一些列方法和属性。
首先，获取对象：
var cache = window.applicationcache;
然后，监听
var cache = window.applicationcache;
/** oncached 事件表示：当更新已经处理完成，并且存储_ 如果一切正常，这里 cache 的状态应该是 4 */
cache.addEventListener(
'cached',
function () {
console.log('Cached,Status:' + cache.status);
},
false,
);
/**
* onchecking 事件表示：当更新已经开始进行
* 但资源还没有开始下载，意思就是说：刚刚获取到最新的资源
* 如果一切正常，这里 cache的状态应该是 2
*/
cache.addEventListener(
'checking',
function () {
console.log('Checking,Status:' + cache.status);
},
false,
);
/** ondownloading 事件表示：开始下载最新的资源
* 如果一切正常，这里 cache 的状态应该是 3
*/
cache.addEventListener(
'downloading',
function () {
console.log('Downloading,Status:' + cache.status);
},
false,
);
/*onerror 事件表示：有错误发生， manifest 文件找不到或服务端有错误发错或资源找不到都会触发 onerror 事件
_ 如果一切正常，这里 cache 的状态应该是 0 */
cache.addEventListener(
'error',
function () {
console.log('Error,Status:' + cache.status);
},
false,
);
/**
* onnoupdate 事件表示：更新已经处理完成
*
* 但是 manifest 文件还未改变，处理闲置状态
*
* 如果一切正常，这里 cache 的状态应该是 1
* */
cache.addEventListener(
'noupdate',
function () {
console.log('Noupdate,Status:' + cache.status);
},
false,
);
/** onupdateready 事件表示：更新已经处理完成，新的缓存可以使用
* 如果一切正常，这里 cache 的状态应该是 4 */ cache.addEventListener(
'updateready',
function () {
console.log('Updateready,Status:' + cache.status);
cache.swapCache();
},
false,
);