Application Cache API(一)
来源:互联网 发布:十年数据库管理员 编辑:程序博客网 时间:2024/05/16 00:33
什么是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.htmlindex.cssimages/logo.pngjs/main.jshttp://img.baidu.com/js/tangram-base-1.5.2.1.jsNETWORK:# 可选# 这一部分是要绕过缓存直接读取的文件login.phpFALLBACK:# 可选# 这部分写当访问缓存失败后,备用访问的资源# 每行两个文件,第一个是访问源,第二个是替换文件*.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 返回缓存的状态
可选值匹配常量描述0appCache.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
- Application Cache API(一)
- Application Cache API (二)
- Application Cache
- Application Cache
- 前端性能优化(Application Cache篇)
- 浅谈HTML5离线缓存(Application Cache)
- Ryu application API原文加翻译(一)
- CACHE & TLB (一)
- Application Cache---HTML5应用程序缓存Application Cache
- Application详解(一)
- HTML5 Application Cache
- manifest 和 application cache
- HTML5 application cache
- HTML5 - Application Cache
- 学习HTML5 Application Cache
- HTML5 Application Cache
- Cache Session Application
- HTML5 Application Cache
- python组织文件知识点
- c++第五次作业
- PE文件结构详解(一)基本概念
- 从安装、管理到防御_阿里云安骑士全向测评
- expdp/impdp导表
- Application Cache API(一)
- apk手动签名
- 安卓Service类创建与单一特性演示
- 全面了解Windows 7系统的百余个服务
- 【项目部署】----如何快速有效基于Linux部署Java Web项目?
- PMCON2017产品经理千人峰会:数据驱动的产品迭代和创新
- The server does not support version 3.0 of the J2EE Web module specification
- rpm安装xtrabackup时的问题
- 初步进行泛微OA开发记录--在调休申请时判断是否加班没有加班时间的话不允许提交