ApplicationCache API（转）

最新推荐文章于 2021-06-09 11:16:59 发布

转载最新推荐文章于 2021-06-09 11:16:59 发布 · 136 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/tingzi/archive/2012/07/13/2590056.html

本文详细介绍了HTML5中的ApplicationCache API，包括其支持离线应用的优势、浏览器支持情况、使用方法、缓存更新方式及注意事项。通过实验证明了浏览器在应用缓存方面的处理逻辑，总结了URL访问策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是Application Cache API？

HTML5提供了一系列的特性来支持离线应用：

application cache
localStrorage
web SQL & indexed database
online/offline events

本文要讲的是application cache。传统的web程序中浏览器也会对资源文件进行cache，但是并不是很可靠，有时起不到预期的效果。而HTML5中的application cache支持离线资源的访问，为离线web应用的开发提供了可能。

哪些浏览器支持Application Cache API？

　　目前支持application cache的浏览器如下：

使用application cache能带来什么好处？

使用application cache能够带来以下几点收益：

　　用户可以在离线时继续使用
　　缓存到本地，节省带宽，加速用户体验的反馈
　　减轻服务器的负载

如何使用application cache

　　要使用application cache，主要用到缓存清单文件：manifest，该文件告诉浏览器需要缓存哪些资源

　　 manifest文件结构

CACHE MANIFEST
# 以上折行必需要写

CACHE:
# 这部分写需要缓存的资源文件列表
# 可以是相对路径也可以是绝对路径
index.html
index.css
images/logo.png
js/main.js
http://img.baidu.com/js/tangram-base-1.5.2.1.js

NETWORK:
# 可选
# 这一部分是要绕过缓存直接读取的文件
login.php


FALLBACK:
# 可选
# 这部分写当访问缓存失败后，备用访问的资源
# 每行两个文件，第一个是访问源，第二个是替换文件*.html /offline.html

　　manifest文件使用

　　写完一个manifest文件之后，像下面这样在你的web页面中引用他

<html manifest="demo.cache">
  ...
</html>

其中文件后缀可以自定义，但是需要在服务器中进行相应配置，指定其为text/cache-manifest MIME 类型文件

　　在apache中定义如下：

AddType text/cache-manifest .cache

　　做完以上工作，你的应用程序就可以使用application cache了。

　更新缓存的方式

　开发人员想要通知客户的浏览器更新application cache的方法有以下两类：

更新manifest文件

　　　　　浏览器发现manifest文件本身发生变化，便会根据新的manifest文件去获取新的资源进行缓存。

　　　　　当manifest文件列表并没有变化的时候，我们通常通过修改manifest注释的方式来改变文件，从而实现更新。

通过javascript操作

　　　　浏览器提供了applicationCache供js访问，通过对于applicationCache对象的操作也能达到更新缓存的目的。

var appCache = window.applicationCache;

appCache.update(); //尝试更新缓存

...

if (appCache.status == window.applicationCache.UPDATEREADY) {
  appCache.swapCache();  //更新成功后，切换到新的缓存
}

　　另外，用户想要更新缓存，可以通过删除缓存文件的方式来清除缓存。

applicationCache对象

　　该对象是window对象的直接子对象，window.applicationCache

　　基类：DOMApplicationCache

　　事件列表：

事件	接口	触发条件	后续事件
`checking`	`Event`	用户代理检查更新或者在第一次尝试下载manifest文件的时候，本事件往往是事件队列中第一个被触发的	`noupdate`, `downloading`, `obsolete`, `error`
`noupdate`	`Event`	检测出manifest文件没有更新	无
`downloading`	`Event`	用户代理发现更新并且正在取资源，或者第一次下载manifest文件列表中列举的资源	`progress`, `error`, `cached`, `updateready`
`progress`	`ProgressEvent`	用户代理正在下载资源manifest文件中的需要缓存的资源	`progress`, `error`, `cached`, `updateready`
`cached`	`Event`	manifest中列举的资源已经下载完成，并且已经缓存	无
`updateready`	`Event`	manifest中列举的文件已经重新下载并更新成功，接下来js可以使用swapCache()方法更新到应用程序中	无
`obsolete`	`Event`	manifest的请求出现404或者410错误，应用程序缓存被取消	无
`error`	`Event`	manifest的请求出现404或者410错误，更新缓存的请求失败	无
		manifest文件没有改变，但是页面引用的manifest 文件没有被正确地下载
		在取manifest列举的资源的过程中发生致命的错误
		在更新过程中manifest文件发生变化	用户代理会尝试立即再次获取文件

　　属性：status 返回缓存的状态


appCache.UNCACHED
appCache.IDLE
appCache.CHECKING
appCache.DOWNLOADING
appCache.UPDATEREADY
appCache.OBSOLETE

　　方法

方法名	描述
update()	发起应用程序缓存下载进程
abort()	取消正在进行的缓存下载
swapcache()	切换成本地最新的缓存环境

manifest解析机制

注意事项

站点离线存储的容量限制是5M
如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器继续全部使用老的缓存
引用manifest的html必须与manifest文件同源，在同一个域下
在manifest中使用的相对路径，相对参照物为manifest文件
CACHE MANIFEST字符串应在第一行，且必不可少
系统会自动缓存引用清单文件的 HTML 文件
manifest文件中CACHE则与NETWORK，FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面
FALLBACK中的资源必须和manifest文件同源
当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问
当manifest文件发生改变时，资源请求本身也会触发更新

开这个博客的初衷主要是想沉淀一下我最近即将开展的对于HTML5及移动端性能方面的一些探索，而appcache我们更加关注的是缓存策略上对于性能的优化上的帮助，所以对于appcache的运行过程我们需要更加地清楚，昨天的Application Cache API （一）整体介绍了一下appcache，接下来会对appcache做一些黑盒测试，以便我们了解更多。

　　这个demo中主要涉及到3类资源，两个页面，我们观察3类资源在不同的场景下浏览器的appcache策略。

　demo代码：

　 test1.html如下：

<html manifest="manifest.appcache">
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
   <title>demo</title>
</head>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
   applicationCache.onchecking = function(){
   console.log("checking")
}
applicationCache.ondownloading = function(){
   console.log("dowload")
}
applicationCache.onnoupdate = function(){
   console.log("noupdate")
}
applicationCache.onprogress = function(){
   console.log("progress")
}
applicationCache.oncached = function(){
   console.log("cached")
}
applicationCache.onupdateready = function(){
    console.log("updateready")
}
applicationCache.onobsolete = function(){
   console.log("obsolete")
}
applicationCache.onerror = function(){
   console.log("error")
}
</script>
<link rel="stylesheet" type="text/css" href="css/index.css" media="all" />
<body>
　　<div id="test">此处观察样式效果<div>
   <img src="img/index.jpg" />
   <img src="img/no-cache.jpg">
</body>
</html>

　　test2.html如下：

<html
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
   <title>demo</title>
</head>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
   applicationCache.onchecking = function(){
   console.log("checking")
}
applicationCache.ondownloading = function(){
   console.log("dowload")
}
applicationCache.onnoupdate = function(){
   console.log("noupdate")
}
applicationCache.onprogress = function(){
   console.log("progress")
}
applicationCache.oncached = function(){
   console.log("cached")
}
applicationCache.onupdateready = function(){
    console.log("updateready")
}
applicationCache.onobsolete = function(){
   console.log("obsolete")
}
applicationCache.onerror = function(){
   console.log("error")
}
</script>
<link rel="stylesheet" type="text/css" href="css/index.css" media="all" />
<body>
　　<div id="test">此处观察样式效果<div>
   <img src="img/index.jpg" />
   <img src="img/no-cache.jpg">
</body>
</html>

我们在两个页面中对于applicationCache对象的事件进行了监听，并将当前触发的事件名输出到console中，以便我们了解发生了什么
两者区别在于，一个引用了manifest，一个没有，用于进行对比。
js和css初始化为空，用于观察效果

结论及场景

　　1, application cache并不因服务器上资源改变而改变，只有manifest改变才会触发重新download，并且是所有cache文件均重新获取

　　　正常载入test1.html时,console输出如下：

checking        /html5/appcache/:13
noupdate        /html5/appcache/:37

当js，css和图片发生变化时，载入test1.html ，console不变：

checking        /html5/appcache/:13
noupdate        /html5/appcache/:37

　　　当manifest文件进行修改后，console如下：

checking                 /html5/appcache/:13
dowload                  /html5/appcache/:27
5 progress                /html5/appcache/:49
updateready              /html5/appcache/:67

　　2，对于另一个没有引用manifest文件的html，当它加载时，不会触发applicationCache的任何事件，但是会使用缓存。

　　页面加载的时候。console输入为空

　　修改服务器js，css等资源，页面中没有变化，修改manifest文件后，刷新页面，资源修改的效果出现。

　　3，直接请求资源的绝对路径，只要该url被缓存过，那么所有的访问均是该资源的缓存，而与引用所在的宿主页面是否有manifest没有关系

　　给js中写上alert("更新")，访问该资源的url，结果没有变化

　　更新manifest之后，该js的访问得到更新

4，js和css，图片文件的本身的访问，均会进行checking

　　直接在地址栏输入一个缓存的js文件，console显示如下：

Document was loaded from Application Cache with manifest http://localhost/html5/appcache/manifest.appcache
Application Cache Checking event
Application Cache NoUpdate event

　　修改manifest文件后，再次访问这个资源。显示如下：

Document was loaded from Application Cache with manifest http://localhost/html5/appcache/manifest.appcache
Application Cache Checking event
Application Cache Downloading event
Application Cache Progress event (0 of 4) http://localhost/html5/appcache/css/index.css
Application Cache Progress event (1 of 4) http://localhost/html5/appcache/js/index.js
Application Cache Progress event (2 of 4) http://localhost/html5/appcache/
Application Cache Progress event (3 of 4) http://localhost/html5/appcache/img/index.jpg
Application Cache Progress event (4 of 4) 
Application Cache UpdateReady event

所有的资源，均被重新下载

　　经过反复试验后，我们可以总结出以下浏览器在应用缓存方面处理url的逻辑策略：

转自：http://www.cnblogs.com/blackbird/archive/2012/06/12/2546751.html

转载于:https://www.cnblogs.com/tingzi/archive/2012/07/13/2590056.html

可选值	匹配常量	描述
0	appCache.UNCACHED	未缓存
1	appCache.IDLE	闲置
2	appCache.CHECKING	检查中
3	appCache.DOWNLOADING	下载中
4	appCache.UPDATEREADY	已更新
5	appCache.OBSOLETE	失效