代码改变世界

Application Cache API (一)

2012-06-12 18:51  BlackBird  阅读(11383)  评论(1编辑  收藏

什么是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文件的时候,本事件往往是事件队列中第一个被触发的

noupdatedownloadingobsoleteerror
noupdate Event 检测出manifest文件没有更新
downloading Event 用户代理发现更新并且正在取资源,或者第一次下载manifest文件列表中列举的资源 progresserrorcachedupdateready
progress ProgressEvent

用户代理正在下载资源manifest文件中的需要缓存的资源

progresserrorcachedupdateready
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