当前位置:首页 » HTML » 正文

HTML5中applicationCache对象

472 人参与  2017年02月12日 20:55  分类 : HTML  点这评论

1.swapCache方法 

概述:swapCache方法用来手工执行本地缓存的更新,它只能在applicationCache对象的updateReady事件被触发时调updateReady事件只有服务器上的manifest文件被更新,并且把manifest文件中所要求的资源文件下载到本地后触发。 顾名思义,这个事件的含义是“本地缓存准备被更新”。当这个事件被触发后,我们可以用swapCache方法来手工进行本地缓存的更新。


2.swapCache方法适用场合

如果本地缓存的容量非常大,本地缓存的更新工作将需要相对较长的时间,而且还会把浏览器给锁住。这时,我们就需要一个提示,告诉用户正在进行本地缓存的更新,该部分代码如下所示。

applicationCache.onUpdateReady = function(){

//本地缓存已被更新,通知用户。

alert("正在更新本地缓存");

applicationCache.swapCache();

alert(“本地缓存已被更新,您可以刷新页面来得到本程序的最新版本。");

};

说明:尽管使用swapCache方法立刻更新了本地缓存,但是并不意味着我们页面上的图像和脚本文件也会被立刻更新,它们都是在重新打开本页面时才会生效。


3.applicationCache对象的事件 

applicationCache对象除了具有update方法与swapCache方法之外,还具有一系列的事件,下面举例说明这些事件是如何被触发的。

首次访问http://localhost:82/mr/网站:

(1)浏览器:请求访问http://localhost:82/mr/。

(2)服务器:返回index.html网页。

(3)浏览器:发现该网页具有manifest属性,触发checking事件,检查manifest文件是否存在。不存在时,触发error事件,表示manifest文件未找到,同时也不执行步骤6开始的交互过程。

(4)浏览器:解析inde.html网页,请求页面上所有资源文件。

(5)服务器:返回所有资源文件。

(6)浏览器:处理manifest文件,请求manifest中所有要求本地缓存的文件,包括index.html页面本身,即使刚才已经请求过该文件。如果你要求本地缓存所有文件,这将是一个比较大的重复的请求过程。

(7)服务器:返回所有要求本地缓存的文件。

(8)浏览器:触发downloading事件,然后开始下载这些资源。在下载的同时,周期性地触发progress事件,开发人员可以用编程的手段获取多少文件已被下载,多少文件仍然处于下载队列等信息。

(9)下载结束后触发cached事件,表示首次缓存成功,存入所有要求本地缓存的资源文件。再次访问

http://localhost:82/mr/网站,步骤1~5同上,在步骤5执行完之后,浏览器将核对manifest文件是否被更新,若没有被更新,触发noupdate事件,步骤6开始的交互过程不会被执行。如果被更新了,将继续执行后面的步骤,在步骤9中不触发cached事件,而是触发updateReady事件,这表示下载结束,可以通过刷新页面来使用更新后的本地缓存,或调用swapCache方法来立刻使用更新后的本地缓存。

在访问缓存名单时如果返回一个HTTP404错误(页面未找到),或者410错误(永久消失),则触发obsolete事件。

在整个过程中,如果任何与本地缓存有关的处理中发生错误的话,都会触发error事件。可能会触发error事件的情况分为以下几种。

缓存名单返回一个HTTP404错误(页面未找到),或者410错误(永久消失)。 

缓存名单被找到且没有更改,但引用缓存名单的HTML页面不能正确下载。 

缓存名单被找到且被更改,但浏览器不能下载某个缓存名单中列出的资源。 

开始更新本地缓存时,缓存名单再次被更改。

 

来源:太阳笑了博客:感恩有你一路相伴(QQ号:1368396530),转载请保留出处和链接!

本文链接:http://www.taiyangxiao.com/post/355.html

本文标签:HTML  applicationCache  swapCache  

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

相关文章

最近发表

    网站分类

    最新留言

    我是公告

      感谢大家访问我的博客,如果大家喜欢我的内容,请友情支持一下,点击下面广告吧!

    皖ICP备16018029号|本站已安全运行了天| 信用认证 |

    博客大全 卢松松博客 中国博客联盟 boke112导航 米鱼博客

    快捷导航返回顶部

    分享:

    支付宝

    微信