HTML5系列之——applicationCache对象

ApplicationCache主要简单介绍:

applicationCache对象实现HTML5相应WEB离线功能。以下我们来主要解说applicationCache对象的一些主要功能和方法

applicationCache对象记录着本地缓存的各种状态及事件。缓存的状态能够通过window.applicationCache.status获得,其状态

主要包含例如以下6种:

<span style="font-family:Microsoft YaHei;font-size:12px;">interface ApplicationCache:EventTarget{
	const unsigned short UNCACHED=0;//未缓存
	const unsigned short IDLE=1;//空暇状态
	const unsigned short CHECKING=2;//检查中
	const unsigned short DOWNLOADING=3;//下载中
	const unsigned short UPDATEREADY=4;//更新准备中
	const unsigned short OBSOLETE =5;//过期状态
	readonly attribute unsigned short status;
}</span>

applicationCache缓存对象的事件例如以下表所看到的:


事件名称


说明


Checking


当user agent检查更新时,或者第一次下载manifest清单时,它往往是第一个被触发的事件


Noupdate


当检查到Manifest中清单文件不须要更新时,触发该事件


Downloading


第一次下载或更新manifest清单文件时,触发该事件


Progress


该事件与downloading类似,但downloading事件仅仅触发一次。Progress事件则在清单文件下载过程中周期性触发


Cached


当manifest清单文件完成下载及成功缓存后,触发该事件


Upadateready


此事件的含义表示缓存清单文件已经完成下载,可通过又一次载入页面读取缓存文件或者通过方法swapCache切换到新的缓存文件。经常使用语本地缓存跟新版本号后的提示


Obsolete


增加訪问manifest缓存文件返回HTTP404错误(页面未找到)或者410错误(永久消失)时,触发该事件


Error


若要达到触发该事件,须要满足一下几种情况之中的一个:

1、已经触发obsolete事件

2、manifest文件没有改变,但缓存文件里存在文件下载失败

3、获取manifest资源文件时发生致命错误。

4、当更新本地缓存时,manifest文件再次被更改。

在实际的应用中,我们能够通过事件监听,并依据当前applicationCache对象的状态处理相关业务。

例如以下代码所看到的:

<span style="font-family:Microsoft YaHei;">applicationCache.addEventListener('updateready',function(){
	//资源文件下载中,能够在此部分添加业务功能
});</span>

接下来值得注意的是,在平时的开发过程中,在使用applicationCache本地缓存的同一时候,往往须要推断当前浏览器的状态(在线或离线)。HTML5正好提供了一个属性,用于推断当前浏览器是否在线,代码例如以下:

windowz.navigator.onLine

假设返回ture,则说明当前浏览器online,返回false则说明当前浏览器offline

时间: 2024-10-13 01:01:41

HTML5系列之——applicationCache对象的相关文章

HTML5之window.applicationCache对象

不知道离线缓存技术的可以参照上一篇文章: HTML5之appcache语法理解/HTML5应用程序缓存/manifest缓存文件官方用法翻译 参考文章 window.applicationCache API 官方 用法: window.applicationCache.addEventListener('updateready', onUpdateReady); if(window.applicationCache.status === window.applicationCache.UPDAT

applicationCache对象

applicationCache对象代表了本地缓存,可以在js中进行一些操作.可以用它来通知用户本地缓存中已经被更新,也允许用户手工更新本地缓存.applicationCache.addEventListener("updateready",function(){        alert("本地缓存已被更新,您可以刷新页面来得到本程序的最新版本");},true);一个比较有意思的用法:setInterval(function(){        // 手工检查是

HTML5系列三(多媒体播放、本地存储、本地数据库、离线应用)

各浏览器对编码格式的支持情况 audio和video元素的属性介绍 1.src:媒体数据的URL地址 <video src="pr6.mp4"></video> <video src="pr6.mp4" width="320" height="240"></video> 2.autoplay:是否自动播放 <video src="pr6.mp4" aut

C++11系列之——临时对象分析

/*C++中返回一个对象时的实现及传说中的右值——临时对象*/ 如下代码: 1 /**********************************************/ 2 class CStudent; 3 CStudent GetStudent() 4 { 5 CStudent loc_stu; 6 return loc_stu; 7 } 8 9 int main() 10 { 11 CStudent stu = GetStudent(); 12 } 13 /************

javascript系列之变量对象

原文:javascript系列之变量对象 引言 一般在编程的时候,我们会定义函数和变量来成功的构造我们的系统.但是解析器该如何找到这些数据(函数,变量)呢?当我们引用需要的对象时,又发生了什么了? 很多ECMAScript编程人员都知道变量和所处的执行上下文环境是密切相关的: 1 var a=10;//全局上下文环境下的变量 2 (function(){ 3 var b=20;//函数上下文环境下的局部变量 4 })(); 5 alert(a);//10 6 alert(b);//"b"

HTML5中的Blob对象的使用

HTML5中的Blob对象和MYSQL中的BLOB类型在概念上是有点区别的.MYSQL中的BLOB类型就只是个二进制数据容器.而HTML5中的Blob对象除了存放二进制数据外还可以设置这个数据的MINE类型,这相当于对文件的储存,其它很多二进制对象也是从这个对象继承的. 在稍低版本的现代浏览器中,这个Blob对象还没规范化,因此需要BlobBuilder之类的方式来创建.但是现在Blob已经规范到可以直接new它的构造器Blob来创建了,而且浏览器几乎都已经支持了这个方式,所以对于旧标准咱就没必

Android调用WebService系列之KSoap2对象解析

在在网络APP中有2个非常重要的节 客户端请求服务端接口的能力 客户端,服务端的对接 而我的Android调用WebService系列共四篇这是最后一篇,所要讲述的只仅仅是Android调用WebService这一种比较少用且不推荐用,但是在一些特定的场合下不得不用的调用方式. Android调用WebService系列之封装能力,Android调用WebService系列之请求调用是讲的请求服务端的能力主要是介绍APP如何拥有,或者说更好的更方便的拥有这种能力 而Android调用WebSer

redis 系列15 数据对象的(类型检查,内存回收,对象共享)和数据库切换

原文:redis 系列15 数据对象的(类型检查,内存回收,对象共享)和数据库切换 一.  概述 对于前面的五章中,已清楚了数据对象的类型以及命令实现,其实还有一种数据对象为HyperLogLog,以后需要用到再了解.下面再了解类型检查,内存回收,对象共享,对象的空转时长. 1.1   类型检查与命令多态 redis中用于操作键的命令基本上可以分为两种类型,一种是可以对任何的键执行,如:del, expire,rename,type,object 这些命令等,对于这些命令属于多态命令.另一种命令

大熊君学习html5系列之------History API(SPA单页应用的必备------重构完结版)

一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会"h5"能够做什么,以及在实际项目中如何去合理的运用达到使用自如,完美驾驭O(∩_∩)O~,好了,废话不多说,直接进入今天的主题, 今天主要讲的是对昨天文章中的代码进行重构,并且相应的美化了一下前台UI界面,如下图所示的效果: 哈哈哈酷吧!继续让咱们做个简单的回顾: 为了提高Web页面的响应速度,越