欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML5系列之——applicationCache对象

程序员文章站 2022-12-01 18:49:33
ApplicationCache主要简介: applicationCache对象实现HTML5对应WEB离线功能。下面我们来主要讲解applicationCache对象的一些主要...

ApplicationCache主要简介:

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

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

主要包括如下6种:

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;
}

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对象的状态处理相关业务。

如下代码所示:

applicationCache.addEventListener('updateready',function(){
	//资源文件下载中,可以在此部分增加业务功能
});


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

windowz.navigator.onLine

如果返回ture,则说明当前浏览器online,返回false则说明当前浏览器offline