applicationCache对象
applicationCache对象代表本地缓存,可以用它来通知用户本地缓存中已经被更新,也允许用户手工更新本地缓存。在浏览器与服务器的交互过程中,当浏览器对本地缓存进行更新,将入新的资源文件时,会触发applicationCache对象的updateready事件,通知本地缓存已经被更新。可以利用该事件告诉用户本地缓存已经被更新,用户需要手工刷新页面来得到最新版本的应用程序,代表如下所示:
applicationCache.addEventListener("updateready", function(event) { // 本地缓存已被更新,通知用户。 alert("本地缓存已被更新,可以刷新页面来得到本程序的最新版本。"); }, false);
另外可以通过applicationCache对象的swapCache()方法来控制如何进行本地缓存的更新及更新的时机。
swapCache()方法
该方法用来手工执行本地缓存的更新,它只能在applicationCache对象的updateReady事件被触发时调用,updateReady事件只有在服务器上的manifest文件被更新,并且把manifest文件中所要求的资源文件下载到本地后触发。该事件的含义是“本地缓存准备被更新”。当这个事件被触发后,可以用swapCache()方法来手工进行本地缓存的更新。
当本地缓存的容量非常大,本地缓存的更新工作将需要相对较长的时间,而且还会把浏览器锁住。这时最好有个提示,告诉用户正在进行本地缓存的更新,代码如下:
applicationCache.addEventListener("updateready", function(event) { // 本地缓存已被更新,通知用户。 alert("正在更新本地缓存……"); applicationCache.swapCache(); alert("本地缓存更新完毕,可以刷新页面使用最新版应用程序。"); }, false);
在以上代码中,如果不使用swapCache()方法,本地缓存一样会被更新,但是,更新的时候不一样。如果不调用该方法,本地缓存将在下一次打开本页面时被更新;如果调用该方法,则本地缓存将会被立刻更新。因此,可以使用confirm()方法让用户选择更新折时机,是立刻更新还是下次打开页面时更新,特别是当用户可能正在页面上执行一个较大的操作的时候。
另外,尽管使用swapCache()方法立刻更新了本地缓存,但是并不意味着我们页面上的图像和脚本文件也会被立刻更新,它们都是在重新打开本页面时才会生效。较完整的示例如下:
HTML页面代码:
<!DOCTYPE html> <html manifest="swapCache.manifest"> <head> <meta charset="UTF-8"/> <title>swapCache()方法示例</title> <script type="text/javascript" src="js/script.js"></script> </head> <body> <p>swapCache()方法示例。</p> </body> </html>
以上页面所使用的脚本文件代码如下:
document.addEventListener("load", function(event) { setInterval(function() { // 手工检查是否有更新 applicationCache.update(); }, 5000); applicationCache.addEventListener("updateready", function(event) { if(confirm("本地缓存已被更新,需要刷新页面获取最新版本吗?")) { // (3)手工更新本地缓存 applicationCache.swapCache(); // 重载页面 location.reload(); } }, false); });
该页面使用的manifest文件内容如下:
CACHE MANIFEST #version 1.20 CACHE: script.js
applicationCache对象的事件
首次访问网站:
- 浏览器请求访问网站;
- 服务器返回请求网页,例如index.html;
- 浏览器发现该网页具有manifest属性,触发checking事件,检查manifest文件是否存在。不存在时,触发error事件,表示manifest文件未找到,不执行步骤6开始的交互过程;
- 浏览器解析index.html网页,请求页面上所有资源文件;
- 服务器返回所有资源文件;
- 浏览器处理manifest文件,请求manifest中所有要求本地缓存的文件,包括index.html页面本身,即使刚才已经请求过该文件。如果要求本地缓存所有文件,这将是一个比较大的重复的请求过程;
- 服务器返回所有要求本地缓存的文件;
- 浏览器触发downloading事件,然后开始下载这些资源。在下载的同时,周期性地触发progress事件,开发人员可以用编程的手段获取多少文件已被下载,多少文件仍然处于下载队列等信息;
- 下载结束后触发checked事件,表示首次缓存成功,存入所有要求本地缓存的资源文件。
再次访问网站,步骤(1)~(5)同上,在步骤(5)执行完之后,浏览器将核对manifest文件是否被更新,若没有被更新,触发noupdate事件,步骤(6)开始的交互过程不会被执行。如果被更新了,将继续执行后面的步骤,在步骤(9)中不触发checked事件,而是触发updateready事件,这表示下载结束,可以通过刷新页面来使用更新后的本地缓存,或调用swapCache()方法来立刻使用更新后的本地缓存。
另外,在访问缓存名单时如果返回一个HTTP404错误(页面未找到),或者401错误(永久消失),则触发obsolete事件。
在整个过程中,如果任何与本地缓存有关的处理中发生错误的话,都会触发error事件。可能会触发error事件的情况分为以下几种:
- 缓存名单返回一个HTTP404错误或HTTP401错误;
- 缓存名单被找到且没有更改,但引用缓存名单的HTML页面不能正确下载;
- 缓存名单被找到且被更改,但浏览器不能下载某个缓存名单中列出的资源;
- 开始更新本地缓存时,缓存名单再次被更改。
发表评论
-
使用选择器在页面中插入内容
2011-11-08 10:09 0使用选择器来插入文字 使用选择器来插入内容 在CSS2中, ... -
HTML5 绘制图形【4】
2011-11-08 08:39 1668绘制变形图形 坐标变换 绘制图形的时候,我们可能会想要旋转 ... -
CSS3 选择器【2】
2011-11-07 14:30 1047UI元素状态伪类选择器 UI元素状态伪类选择器的共同特征是: ... -
HTML5 绘制图形【3】
2011-11-05 19:28 1280绘制渐变图形 渐变是指在填充时从一种颜色慢慢过渡到另外一种颜 ... -
CSS3 选择器【1】
2011-11-06 12:19 1668选择器概述 选择器是CS ... -
HTML5 绘制图形【2】
2011-11-04 11:42 1368使用路径 绘制圆形 要 ... -
HTML5 绘制图形【1】
2011-11-03 12:48 1455canvas元素基础 canvas元素是HTML5中新增的一 ... -
CSS3 模块化结构
2011-11-03 19:12 1459CSS3中的模块 模块名称 功能描述 Basi ... -
HTML5 获取地理位置信息
2011-11-01 18:12 5400Geolocation API的基本知识 在HTML5中,为 ... -
HTML5 使用Web Worker处理线程
2011-11-01 09:16 4600基础知识 Web Worker是在HTML5中新增的,用来在 ... -
HTML5 Web Sockets通信
2011-10-29 20:15 4045基础介绍 Web Sockets是HTML5提供的在Web应 ... -
HTML5 跨文档消息传输
2011-10-29 19:11 1970基本介绍 HTML5提供了在网页文档之间互相接收与发送信息的 ... -
HTML5 离线应用程序【1】
2011-10-27 14:02 1513离线Web应用程序介绍 在HTML5中新增了一个API,为离 ... -
HTML5 本地数据库
2011-10-24 21:03 2551本地数据库的基本概念 ... -
HTML5 Web Storage
2011-10-24 15:51 1561Web Storage简单使用 在HTML5中重新提供了一种 ... -
HTML5 多媒体播放【3】
2011-10-23 10:45 1209video元素和audio元素的方法 play()方法:使 ... -
HTML5 多媒体播放【2】
2011-10-22 21:14 1715音频和视频元素的属性 这两种元素所具有的属性大致相同,介绍如 ... -
HTML5 多媒体播放【1】
2011-10-21 18:58 892video与audio元素基础 在HTML5中,video元 ... -
HTML5 拖放API
2011-10-17 19:43 4931在HTML5中,已经支持在浏览器与其他应用程序之间的数据互相拖 ... -
HTML5 文件API
2011-10-16 18:49 4962在HTML5中,提供了一个关于文件操作的文件API,通过使用这 ...
相关推荐
HTML5离线应用程序.pdf
什么是离线网络应用程序?乍一看,从以下几个方面来说就像一个矛盾。网页是需下载并呈现的。下载意味着网络连接。你怎能在离线的时候下载?当然,你不能。但你可以在你在线的...这就是HTML5离线应用程序怎样工作的。
互联网已经日益成为应用程序开发的默认平台...由于采用了HTML页面形式的用户界面,客户端的数据处理能力较C/S应用程序有所下降,用户体验也相对糟糕,无法像C/S那样使用丰富的效果来展示数据。2.浏览器必须总是具有网络
Offlines 是一个 HTML5 离线应用程序,它演示了如何构建一个了解其 Internet 连接状态的应用程序,并在没有与网络的持久连接的情况下继续工作。 Windows 开发人员请注意- 确保在靠近驱动器根目录的位置运行此应用...
HTML5是由W3C发布的新一代HTML标准,不仅强化了Web网页的表现性能,还拥有很多API接口,开发者利用这些接口,可以便捷地创建更加丰富、引人入目的应用程序。在分析研究HT-ML5标准基础上,利用其技术实现了一个离线便签...
HTML5离线应用###一、离线应用的特点和优势(1)允许web应用程序将app保存在浏览器中;(2)能够保存运行程序所需的所有文件,包括html,css,js,图片等;(3)不会被浏览器缓存清除;(4)同时在新的数据加载的时候,...
HTML5程序设计-3期(KC014) 离线web应用教学单元设计.doc 学习资料 复习资料 教学资源
10.2.2 搭建简单的离线应用程序 203 10.2.3 支持离线行为 204 10.2.4 manifest文件 204 10.2.5 applicationcache api 205 10.3 使用html5离线web应用构建应用 206 10.3.1 创建记录资源的manifest文件 208 ...
HTML5引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在离线时进行访问。 :pushpin:应用程序缓存为应用带来三个优势: 离线浏览 – 用户可在应用离线时使用它们 速度 – 已缓存资源加载得更快 减少服务器...
然后讲解了HTML5的基本元素以及所做的改进、canvas(画布)、视音频、微格式、微数据、拖曳等新增特性,还讲解了WebSocket、WebWorkers、Web存储、离线Web应用程序、地理定位等新增的API。同时,《HTML5移动应用开发...
This a very good html5 demo for Android development-This is a very good html5 demo for Android development Android应用开发新路线 ...如何在Android中构建HTML5离线应用? 如何使用Canvas进行绘图?
10.2.2 搭建简单的离线应用程序 203 10.2.3 支持离线行为 204 10.2.4 manifest文件 204 10.2.5 applicationCache API 205 10.3 使用HTML5离线Web应用构建应用 206 10.3.1 创建记录资源的manifest文件 208 10.3.2 ...
然后讲解了HTML5的基本元素以及所做的改进、canvas(画布)、视音频、微格式、微数据、拖曳等新增特性,还讲解了WebSocket、WebWorkers、Web存储、离线Web应用程序、地理定位等新增的API。同时,《HTML5移动应用开发...
oghliner, 将离线网页应用部署到GitHub页面的模板和工具 OghlinerOghliner是一个将离线网络应用程序部署到GitHub页面的node 工具。脱机Web应用程序是在客户机上缓存文件( HTML,JavaScript,CSS,图像,等等 )的Web...
HTML5高级程序设计,第2版。Pro HTML5 Programming 2nd Edition。 本书首先介绍了html5 的历史背景、新的语义标签及与以往html 版本相比的根本变化,同时揭示了html5 背后的设计原理。从第2 章起,分别围绕构建...
今天我们的内容是关于如何创建离线web应用,他的好处是可以让浏览器下载我们指定的web资源,这样用户在离线状态下也能正常使用我们的站点
12.2.2 搭建简单的离线应用程序 256 12.2.3 支持离线行为 257 12.2.4 manifest文件 257 12.2.5 applicationCache API 259 12.2.6 运行中的应用缓存 260 12.3 使用HTML5离线Web应用构建应用 261 12.3.1 创建...
10.2.2 搭建简单的离线应用程序 203 10.2.3 支持离线行为 204 10.2.4 manifest文件 204 10.2.5 applicationCache API 205 10.3 使用HTML5离线Web应用构建应用 206 10.3.1 创建记录资源的manifest文件 208 10.3.2 ...
Eel –一个用于制作简单电子类离线HTML/JS GUI应用程序的小型Python库