当前离线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代码

<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应用。

很多其它有关HTML5的相关更新尽在梦龙小站。

版权声明：本文博主原创文章，博客，未经同意不得转载。

HTML5实际和离线应用分析的更多相关文章

  1. 使用HTML5 WebDataBase设计离线数据库

    基于HTML5的Web DataBase 可以让你在浏览器中进行数据持久地存储管理和有效查询,假设你的离线应用程序有需要规范化的存储功能,那么使用Web DataBase,可以使你的应用程序无论是在离 ...

  2. 令人惊叹的HTML5动画及源码分析下载

    HTML5非常酷,利用HTML5制作动画简直让我们忘记了这世界上还有flash的存在.今天我们要分享的一些HTML5动画都还不错,有些动画设计还是挺别出心裁的.另外,每一款HTML5动画都提供源代码下 ...

  3. HTML5项目笔记10：使用HTML5 IndexDB设计离线数据库

    之前的文章(http://www.cnblogs.com/wzh2010/archive/2012/05/22/2514017.html)里面描述了HTML5 离线数据存储的Web SQL,一个基于S ...

  4. QQ空间玩吧HTML5游戏引擎使用比例分析

    GameLook报道/“Cocos 2015开发者大会(春季)”于4月2日在国家会议中心圆满落下帷幕.在会上全新的3D编辑器,Cocos Runtime等产品重磅公布,给业界带来了Cocos这款国产引 ...

  5. 经典的HTML5游戏及其源码分析

    HTML5已经相当强大,在HTML5平台上,我们可以完成很多非常复杂的动画效果,包括游戏在内.早期我们只能利用flash来实现网络游戏,现在我们又多了一种选择,即用HTML5制作游戏.相比flash, ...

  6. Spark离线日志分析，连接Spark出现报错

    首先,我的代码是这样的 import org.apache.spark.rdd.RDD import org.apache.spark.{SparkConf, SparkContext} object ...

  7. HTML5的五种客户端离线存储方案

    最近折腾HTML5游戏需要离线存储功能,便把目前可用的几种HTML5存储方式研究了下,基于HT for Web写了个综合的实例,分别利用了Cookie.WebStorage.IndexedDB以及Fi ...

  8. HTML5五种客户端离线存储方案

    最近折腾HTML5游戏需要离线存储功能,便把目前可用的几种HTML5存储方式研究了下,基于HT for Web写了个综合的实例,分别利用了Cookie.WebStorage.IndexedDB以及Fi ...

  9. HTML5 Web 客户端五种离线存储方式汇总

    最近折腾HTML5游戏需要离线存储功能,便把目前可用的几种HTML5存储方式研究了下,基于HT for Web写了个综合的实例,分别利用了Cookie.WebStorage.IndexedDB以及Fi ...

随机推荐

  1. HDU4876ZCC loves cards(多校题)

    ZCC loves cards Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Tot ...

  2. https原理及tomcat配置https方法

    一. 什么是HTTPS 在说HTTPS之前先说说什么是HTTP,HTTP就是我们平时浏览网页时候使用的一种协议.HTTP协议传输的数据都是未加密的,也就是明文的,因此使用HTTP协议传输隐私信息非常不 ...

  3. [置顶] Firefox OS 学习——manifest.webapp结构分析

    在Firefox OS 学习——Gaia 编译分析  这篇文章多次提到manifest.webapp文件,对于做过android app 开发的人来说,都很熟悉Android.mk 和Manifest ...

  4. windows服务的创建、安装和调试

    1.创建 windows服务 项目   文件 -> 新建项目 -> 已安装的模板 -> Visual C# -> windows ,在右侧窗口选择"windows 服 ...

  5. jeecg 3.5.2 新版本号4种首页风格 【经典风格，shortcut风格，ACE bootstrap风格，云桌面风格】

    [1]经典风格: [2]Shortcut风格: [3]ACE bootsrap风格: [4]云桌面风格: [5]自己定义图表 watermark/2/text/aHR0cDovL2Jsb2cuY3Nk ...

  6. SSH是什么？Linux如何修改SSH端口号？

    通过SSH连接可以远程管理Linux等设备,默认linuxssh端口是22端口,如何修改SSH默认端口,如何增加SSH端口呢?,下面小编给大家演示一下   工具/原料 Xshell   putty 等 ...

  7. 百度经纬度和google经纬度互转

    原文:百度经纬度和google经纬度互转 百度地图的坐标转换,由于百度地图在GCJ02协议的基础上又做了一次处理,变为 BD09协议的坐标,以下是坐标的转化方式,可以方便和其他平台转化 private ...

  8. hdu1507最大匹配

    题意:给出n*m的矩阵方块,某些方块是ponds,这些方块不能出售,然后能出售的是1*2的方块 要求求出有多少块1*2的方块能够出售,并输出这些方块的坐标(specia judge) 关键是怎么建出二 ...

  9. 【译】使用微软企业库5.0进行WCF服务边界上的异常保护

    在Windows Communication Foundation (WCF)中,为了阻止服务的实现细节从服务的安全边界泄露,未知的异常不应该被发送至客服端.在WCF配置中将<serviceDe ...

  10. zabbix通过脚本发送短信

    zabbix通过脚本发送短信 原则 和zabbix电子邮件是一样的,他们是action内部配置,司的api来完毕.当然网上有不少利用139邮箱来发的,这个事实上算调用email的一种,这里复述的是调用 ...