Application Cache API （一）
2012-06-12 18:51 by BlackBird, 481 阅读, 0 评论, 收藏, 编辑
什么是Application Cache API？
HTML5提供了一系列的特性来支持离线应用：
- application cache
- localStrorage
- web SQL & indexed database
- online/offline events
哪些浏览器支持Application Cache API？
使用application cache能带来什么好处？
- 用户可以在离线时继续使用
- 缓存到本地，节省带宽，加速用户体验的反馈
- 减轻服务器的负载
如何使用application cache
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操作
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 返回缓存的状态
| 可选值 | 匹配常量 | 描述 |
| 0 |
appCache.UNCACHED |
未缓存 |
| 1 |
appCache.IDLE |
闲置 |
| 2 |
appCache.CHECKING |
检查中 |
| 3 |
appCache.DOWNLOADING |
下载中 |
| 4 |
appCache.UPDATEREADY |
已更新 |
| 5 |
appCache.OBSOLETE |
失效 |
方法
| 方法名 | 描述 |
| update() | 发起应用程序缓存下载进程 |
| abort() | 取消正在进行的缓存下载 |
| swapcache() | 切换成本地最新的缓存环境 |
manifest解析机制
注意事项
- 站点离线存储的容量限制是5M
- 如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器继续全部使用老的缓存
- 引用manifest的html必须与manifest文件同源，在同一个域下
- 在manifest中使用的相对路径，相对参照物为manifest文件
- CACHE MANIFEST字符串应在第一行，且必不可少
- 系统会自动缓存引用清单文件的 HTML 文件
- manifest文件中CACHE则与NETWORK，FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面
- FALLBACK中的资源必须和manifest文件同源
- 当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
- 站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问
- 当manifest文件发生改变时，资源请求本身也会触发更新
转载时，请注明原文地址，谢谢！http://www.cnblogs.com/blackbird/archive/2012/06/12/2546751.html