标签：
离线检測
想要开发离线Web应用第一步就得知道用户的设备的上网情况。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。
因为navigator.onLine还是存在兼容性的问题。单独使用navigator.onLine属性不能确定网络的连通情况。所以。在请求错误发生的时候，检測这个属性是有必要的。以下是检測这个属性的小样例。
JavaScript代码
if(navigator.onLine){//正常上网}else{//运行离线状态时的任务}
除了navigator.onLine属性之外，还有两个事件：online和offline。当网络从离线变成在线，或者从在线变为离线的时候，分别触发这两个事件。online事件和offline事件使用的小样例例如以下
JavaScript代码
window.addEventListener(‘online‘,function(){alert("online")}, false);
window.addEventListener(‘offline‘,function(){alert("offline")}, false)
为了检測是否离线，页面载入之后。能够通过navigator..onLine属性取得初始状态。然后通过online事件和offline事件来确定网络连接状态是否变化。当online事件和offline事件发生变化的时候，navigator.onLine属性也会发生变化。
必须手工轮询这个属性才干检測到网络状态的变化。
支持离线检測的浏览器有Firefox 3+、Opera 10.6+、Chrome、IE6+(仅仅支持navigator.onLine属性)、Android版Webkit和iOS版Safari。
应用缓存
HTML5的应用缓存(application cache)。以下简称appcache。?
Appcache是专门为开发离线Web应用而设计的。Appcache是从浏览器的缓存中分出来的一块缓存区。在这块缓存区保存数据，能够使用一个描写叙述文件(manifest file)，列出要下载和缓存的资源。
以下是一个简单的描写叙述文件小实例。
在最简单的情况下，描写叙述文件里列出的都是须要下载的资源，以备离线时使用。
设置描写叙述文件的选项比較多，在这里仅仅是一笔带过。大家想了解很多其它请打开网址：http://html5doctor.com/go-offline-with-application-cache。
在页面中必须将描写叙述文件与页面关联起来。能够在html标签中加入manifest属性，并指定文件的路径。小样例例如以下。
HTML代码
（html manifest="/offline.manifest"）
offline.manifest代码
CACHE MANIFEST
#缓存文件
clock.html
clock.css
clock.js
上面的代码告诉页面。/offline.manifest中包括着描写叙述文件。这个文件的MIME类型必须是text/cache-manifest。
尽管应用缓存的意图是确保离线时资源能够用，可是也有对应的JavaScript API让开发人员知道它都在做什么。这个API的核心是applicationCache对象。这个对象有一个status属性，属性值是常量，表示的状态例如以下。
0：无缓存，即没有与页面相关的应用缓存。
1：闲置，即应用缓存未得到更新。
2：检查中。即正在下载描写叙述文件并检查更新。
3：下载中。即应用缓存正在下载描写叙述文件里指定的资源。
4：更新完毕，即应用缓存已经更新资源，并且全部资源都已下载完毕。能够通过swapCache()方法来使用了。
5：废弃。即应用缓存存的描写叙述文件已经不存在了，因此页面无法再訪问应用缓存。
应用缓存还有非常多相关的事件，表示其状态的改变。
相关事件例如以下
checking：在浏览器为应用缓存查找更新时触发。
error：在检查更新或下载资源期间错误发生时触发。
noupdate：在检查描写叙述文件发现文件无变化时触发。
downloading：在開始下载应用缓存资源时触发。
progress：在文件下载应用缓存的过程中持续不断地触发。
updateready：在页面新的应用缓存完成下载而且能够通过swapCache()使用时触发。
cached：在应用缓存完整可用的时候触发。
一般来讲。这些事件会随着页面载入按上述顺序依次触发。只是，通过调用update()方法也能够手工干预，让应用缓存为检測更新而触发上述事件。
JavaScript代码
applicationCache.update();
Update()一调用，应用缓存就会去检查描写叙述文件是否更新(触发checking事件)。然后就像页面刚刚载入一样，继续运行兴许操作。假设触发了updateready事件，说明新版本号的应用缓存已经可用，而此时你须要调用swapCache()方法来启用新应用缓存。
JavaScript代码
applicationCache.addEventListener(‘updateready‘,function(){
applicationCache.swapCache();
}, false);
支持HTML5离线存储的浏览器有iOS 3.2+版Safari、Chrome、Android版Webkit、Firefox 3+、Safari 4+和Opera 10.6+。
在Firefox 4及曾经版本号中调用swapCache()方法会报错。
HTML5实战与剖析之离线应用为大家介绍完了，这节主要为大家介绍了离线检測navigator.onLine属性的应用，和离线缓存的Appcache应用。
标签：
原文地址：http://www.cnblogs.com/yy-5616/p/5062508.html
