应用缓存 – 学习画板

首页 » HTML » 应用缓存

应用缓存

HTML5的应用缓存,或者简称为appcache,是专门为开发离线Web应用而设计的。Appcache就是从浏览器的缓存中分出来的一块缓存区。要想在这个缓存中保存数据,可以使用一个描述文件,列出要下载和缓存的资源。下面是一个简单的描述文件示例。

CACHE MANINFEST
#Comment

file.js
file.css

在最简单的情况下,描述文件中列出的都是需要下载的资源,以备离线时使用。
要将描述文件与页面关联起来,可以在<html>中的manifest属性中指定这个文件的路径,例如:

<html mainfest = "/offline.manifest">

以上代码告诉页面,offline.manifest中包含着描述文件。这个文件的MIME类型必须是text/cache-manifest。

虽然应用缓存的意图是确保离线时资源可用,但也有相应的JavaScriptAPI让你知道它都在做什么。这个API的核心applicationCache对象,这个对象有一个status属性,属性的值是常量,表示应用缓存的如下当前状态。

  • 0:无缓存,即没有与页面相关的应用缓存。
  • 1:闲置,即应用缓存未得到更新。
  • 3:下载中,即正在下载描述文件并检查更新。
  • 4:更新完成,即应用缓存已经更新了资源,而且所有资源都已下载完毕,可以通过swapCache()来使用了。
  • 5:废弃,即应用缓存的描述文件已经不存在了,因此页面无法在访问应用缓存。应用缓存还有很多相关的事件,表示其状态的改变。一下是这些事件。
  • checking:在浏览器为应用缓存查找更新时触发。
  • error:在检查更新下载资源期间发生错误时触发。
  • noupdate:在检查描述文件发现文件无变化时触发。
  • downloading:在文件下载应用缓存资源时触发。
  • progress:在文件下载应用缓存的过程中持续不断地触发。
  • updateready:在页面新的应用缓存下载完毕且可以通过swapCache()使用时触发。
  • cached:在应用缓存完整可用时触发。

一般来讲,这些事件会随着页面加载按上述顺序依次触发。不过,通过调用upadte()方法也可以手工干预,让应用缓存检查更新而触发上述事件。

applicationCache.update();

update()一经调用,应用缓存就会检查描述文件是否更新(触发checking事件),然后就像页面刚刚加载一样,继续执行后续操作。如果触发了cached事件,就说明应用缓存已经准备就绪,不会再发生其它操作了。如果触发了updateready事件,则说明新版本的应用缓存已经可用,而此时你需要调用swapCache()来启用新应用缓存。

var EventUtil = {
    addHandler: function (element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    }
};

EventUtil.addHandler(applicationCache, "updateready", function () {
    applicationCache.swapCache();
});

支持HTML5应用缓存的浏览器有Firefox 3+、Safari 4+、 Opera10.6、Chrome、iOS 3.2+版Safari及Android版WebKit。在Firefox4及之前版本中调用swapCache()会抛出错误。

此文章发表在 HTML. 将 固定链接 加入收藏.