您的位置：首页 > 移动开发

Application Cache API （一）

2013-06-01 13:45 302 查看

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。传统的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 返回缓存的状态

　　
可选值匹配常量描述
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文件发生改变时，资源请求本身也会触发更新

转载时，请注明原文地址，谢谢！/article/5453969.html

本文参考

　　http://www.w3.org/TR/2008/NOTE-offline-webapps-20080530/#offline

　　http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#application-cache-api

　　https://developer.apple.com/library/safari/#documentation/iphone/conceptual/safarijsdatabaseguide/OfflineApplicationCache/OfflineApplicationCache.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航