HTML5实战与剖析之离线应用

当前位置 : 首页 > 网页制作 > html5 > HTML5实战与剖析之离线应用

HTML5实战与剖析之离线应用

来源: 作者: 时间:2016-01-30 08:53
离线的Web应用,就是在设备不能上网的时候还能运行应用。HTML5把离线应用作为重点,主要是开发人员的心愿。离线应用的开发的步骤有:首先应该知道设备是否能够上网;然后应该还能



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

  5:废弃,即应用缓存存的描述文件已经不存在了,因此页面无法再访问应用缓存。


  应用缓存还有很多相关的事件,表示其状态的改变。相关事件如下


  checking:在为应用缓存查找更新时触发。

  error:在检查更新或下载资源期间发生错误时触发。

  noupdate:在检查描述文件发现文件无变化时触发。

  downloading:在开始下载应用缓存资源时触发。

  progress:在文件下载应用缓存的过程中持续不断地触发。

  updateready:在页面新的应用缓存下载完毕并且可以通过swapCache()使用时触发。

  cached:在应用缓存完整可用的时候触发。


  一般来讲,这些事件会随着页面加载按上述顺序依次触发。不过,通过调用update()方法也可以手工干预,让应用缓存为检测更新而触发上述事件。


  Script代码


applicationCache.update();


  Update()一调用,应用缓存就会去检查描述文件是否更新(触发checking事件),然后就像页面刚刚加载一样,继续执行后续操作。如果触发了updateready事件,说明新版本的应用缓存已经可用,而此时你需要调用swapCache()方法来启用新应用缓存。


  代码


applicationCache.addEventListener('updateready',function(){
	applicationCache.swapCache();
}, false);


  支持HTML5离线存储的浏览器有iOS 3.2+版Safari、Chrome、版Webkit、Firefox 3+、Safari 4+和Opera 10.6+。在Firefox 4及以前版本中调用swapCache()方法会报错。

  HTML5实战与剖析之离线应用为大家介绍完了,这节主要为大家介绍了离线检测navigator.onLine属性的应用,和离线缓存的Appcache应用。更多有关HTML5的相关更新尽在梦龙小站。





Tag:
网友评论

<