当前离线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. Wamp 访问本地站点慢 的解决办法

    自从安装了64位的windows 8.1之后,电脑运行速度变快了,可是重新下载安装64位的WAMP,访问本地的WEB站点确是很慢,根本不像是在本地访问,经过在WAMP论坛上搜索,终于找到了解决办法,主 ...

  2. Fitnesse使用系列二

    决策表 Fitnesse中提供了好几种表格样式,前面说了.表格是运行測试的关键.从字面看.表格描写叙述的是測试用例.从运行角度看,表格为后端的代码(fitnesse里称作fixture)提供了包名.类 ...

  3. oschina jQuery 插件

    jQuery 插件 jQuery自动完成插件(25) jQuery分页插件(20) jQuery 文件上传(21) jQuery 地图插件(14) jQuery对话框(109) jQuery图片展示/ ...

  4. loj1336（数学）

    传送门:Sigma Function 题意:定义f(n)为n的约数之和,求[1,n]中f值为偶数的数的个数. 分析:由题目给定公式可知,若f(n)为奇数,则相乘的每一项都必须为奇数. 每一项为奇数的条 ...

  5. Flume传输数据事务分析

    Flume传输数据事务分析 本文基于ThriftSource,MemoryChannel,HdfsSink三个组件,对Flume传输数据的事务进行分析.假设使用的是其它组件.Flume事务详细的处理方 ...

  6. 2014-5-22 java.lang.OutOfMemoryError: Java heap space的一次诊断

    收到消息某系统一个节点因为内存溢出而宕机.系统的中间件是weblogic.数据库的oracle. 1. 先用IBM  HeapAnalyzer分析内存溢出时的dump文件,找到占用内存最多的请求,然后 ...

  7. centos 6.3 vnc连接—— catalog is not properly configured, attempting to determine an appropriate font p

    摘要:linux环境下,利用VNC连接远程桌面是经常用到的.这里,我们介绍centos上,利用VNC连接远程桌面的方法和常见的两个问题的解决方法1)由于字体问题,导致VNCserver无法启动 2)由 ...

  8. android greenDao SQLite数据库操作使用的工具

    关于如何建立类生成一个演示project.今天介绍如何使用. 这是ExampleDaoGeneratorproject代码,做了一些改动 /* * Copyright (C) 2011 Markus ...

  9. hdu1712（分组背包）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1712 分析: 典型的分组背包问题,如果不会的可以看一下背包九讲. 看下背包九讲中的描述: for 所有 ...

  10. Codeforces 164 E Compatible Numbers

    主题链接~~> 做题情绪:好题,做拉的比赛的时候想了非常久,想到枚举变幻某一位的 0 为 1 .可是每一个数都这样枚举岂不超时的节奏,当时没想到事实上从大到小枚举一次就 ok 了. 解题思路: ...