checking在浏览器为应用缓存查找更新时触发
离线的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)2881064151{ //正常上网 }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()方法也可以手工干预,让应用缓存为检测更新而触发上述事件。
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的相关更新尽在梦龙小站。
checking在浏览器为应用缓存查找更新时触发的更多相关文章
- FastAdmin 浏览器 JS CSS 缓存如何更新?
由于代码修改,但文件名没有修改,因为浏览器对 JS 和 CSS 是缓存的,而且由于服务器无法控制客户端的缓存. 但是可以对 JS 和 CSS 的请求加上版本号,达到更新缓存的效果.
- 利用浏览器favicon的缓存机制(F-Cache)生成客户端浏览器唯一指纹
利用浏览器favicon的缓存机制(F-Cache)生成客户端浏览器唯一指纹 首先介绍下: 这个技术出自 UIC论文:https://www.cs.uic.edu/~polakis/papers/so ...
- 浏览器js与css文件有缓存未更新致最新版本
这是由于编码人员频繁更改引入的资源文件,浏览器中存在缓存,当你清空浏览器缓存也无济于事时可以采用在资源文件尾部加?_MM(MM为随机参数)即可强制更新资源文件.
- IE浏览器下ajax缓存导致数据不更新的解决方法
摘自:http://www.iefans.net/ie-ajax-json-shuju-huancun/ 最近做设计的时候遇到一个小问题,当你用jquery的getjson函数从后台获取数据的时候,I ...
- 解决修改css或js文件后,浏览器缓存未更新问题
问题描述:最近在上线新版本项目的时候,发现有的用户的操作还是调用的老版本JS里面的内容,这样就造成原来新的JS里面加上的限制不能限制用户的操作,从而导致用户可以重复操作. 问题产生原因: 如果在用户之 ...
- IE浏览器下AJAX缓存问题导致数据不更新的解决办法
一直知道使用ajax的时候,有的时候会出现数据缓存的问题,当时也没有深究,就是所有的简单粗暴的全部加上cache:false,或者使用在url处加上随机时间函数 今天无意间看见了为什么会出现缓存的原因 ...
- HTML 5 应用程序缓存(Application Cache)cache manifest 文件使用 html5 中创建manifest缓存以及更新方法 一个manifest文件会创建一份缓存,不同的manifest文件其缓存的内容是互不干扰的
HTML5 离线缓存-manifest简介 HTML 5 应用程序缓存 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. 什么是应用程序缓存(A ...
- 理解http浏览器的协商缓存和强制缓存
阅读目录 一:浏览器缓存的作用是什么? 二:理解协商缓存 1 Last-Modified/if-Modify-Since 2 ETag/if-None-Match 三:理解强制缓存 回到顶部 一:浏览 ...
- 浅谈浏览器http的缓存机制
针对浏览器的http缓存的分析也算是老生常谈了,每隔一段时间就会冒出一篇不错的文章,其原理也是各大公司面试时几乎必考的问题. 之所以还写一篇这样的文章,是因为近期都在搞新技术,想“回归”下基础,也希望 ...
随机推荐
- 简单的2d图形变换--仿设变换AffineTransform
在ios中常常遇到些小的动画效果,比如点击一个按钮后,按钮上的三角形图片就旋转了.这种简单的小动画,常常通过更改view的transform属性来实现.这个transform属性,就是一个仿射变化矩阵 ...
- C#模拟百度登录
目录: 1.fiddler解析百度登录地址 2.处理传入参数 1.fiddler解析百度登录地址 因工作需要,所以研究了下百度的登陆.首先打开https://passport.baidu.com/v2 ...
- Greedy:Stripes(POJ 1826)
新生物 题目大意:给你一堆数,两两结合,答案为2*sqrt(x1*x2),问组合成一个数时,最小的量? 超级无敌大水题,排序或者用堆都可以,反正就是优先组合大的,让根号一直把大数开根降低整体的大小 # ...
- MySQL常用简单小命令
1. 登录数据库: mysql -h localhost -u root -p
- phpcms-v9中建立wap手机站点
web网站用的是phpcms v9搭建的,为了方便手机用户浏览网站,于是用phpcms v9自带的手机门户模块搭建了个wap站(http:.org换成你的wap网站域名----------- 到这一步 ...
- 使用ASP.NET 5开发AngularJS应用
今天推荐的是一个系列文章,讲述了如何使用ASP.NET 5来开发AngularJS应用,一共7篇文章. 在Visual Studio 2015中由于优化了项目结构,优化了前端JS框架的引用方式,所以开 ...
- Codeforces Round #352 (Div. 2) C. Recycling Bottles 贪心
C. Recycling Bottles It was recycling day in Kekoland. To celebrate it Adil and Bera went to Centr ...
- 关于sqoop与datax。 和sqoop to oracle插件OraOop
之前我还在想了解下datax,是否有可能替换sqoop,但了解后发现,datax和sqoop的业务场景是不同的.前者适合异构数据库的同步,后者适合hdfs与rdbms互相之间的同步.针对sq ...
- Hark的数据结构与算法练习之鸽巢排序
算法说明 鸽巢排序是分布排序的一种,我理解其实鸽巢就是计数排序的简化版,不同之处就是鸽巢是不稳定的,计数排序是稳定的. 逻辑很简单,就是先找出待排数组的最大值maxNum,然后实例一个maxNum+1 ...
- Xamarin Anroid开发教程之Anroid开发工具及应用介绍
Xamarin Anroid开发教程之Anroid开发工具及应用介绍 Xamarin开发Anroid应用介绍 如今智能手机已经盛行了好几年,而针对这些智能手机的软件开发也变得异常火热.但是在Andro ...