HTML5实战与剖析之离线应用

àì夳堔傛蜴生んèń 2022-09-20 08:39 204阅读 0赞

离线的Web应用，就是在设备不能上网的时候还能运行应用。HTML5把离线应用作为重点，主要是开发人员的心愿。离线应用的开发的步骤有：首先应该知道设备是否能够上网;然后应该还能访问一定的资源(如图像、CSS、JavaScript等)，只有这样才能正常工作。

# 　　离线检测 #

想要开发离线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代码***

***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()方法来使用了。