html5 Application Cache 机制以及使用
那什么是Application Cache呢？
Application Cache好处
- 离线浏览 - 用户可在应用离线时使用它们
- 速度 - 已缓存资源加载得更快
- 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源
说了这么多怎么使用App?
- 新建一个manifest 文件（这里需要注意了IIS 中的MEMI类型中可能不能识别manifest 后缀的文件可能需要在iis 中MEMI类型中添加manifest 类型）
- 编写manifest 文件示例如下
CACHE MANIFEST CACHE:
# 需要缓存的列表
/script/index.js NETWORK:
# 不需要缓存的
默认值我一般写* FALLBACK:
# 访问缓存失败后，备用访问的资源，第一个是访问源，第二个是替换文件*.html /offline.html
.jpg/.jpg- 将需要引用Application Cache的页面头部加上manifest属性示例：
- <html manifest="~/Manifest/CMServer.manifest">
Application Cache需要注意
- 浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。
- 一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使您修改了服务器上的文件。为了确保浏览器更新缓存，您需要更新 manifest 文件
ApplicationCache对象
applicationCache对象代表了本地缓存，可以在js中进行一些操作。可以用它来通知用户本地缓存中已经被更新，也允许用户手工更新本地缓存。
applicationCache.addEventListener("updateready",function(){
alert("本地缓存已被更新，您可以刷新页面来得到本程序的最新版本");
},true);
一个比较有意思的用法：
setInterval(function(){
// 手工检查是否有更新
applicationCache.update();
},5000);
applicationCache.addEventListener("updateready",function(){
if(confirm("本地缓存已被更新，需要刷新页面来获取应用程序最新版本，是否刷新？")){
// 手工更新本地缓存
applicationCache.swapCache();
// 重载页面
location.reload();
}
},true);
【applicationCache对象的事件】
- applicationCache可以监听的事件还有:
- checking ---- 浏览器发现网页具有manifest属性，触发checking事件，检查manifest文件是否存在。不存在时，触发error事件。
- noupdate ---- 见downloading。
- downloading ---- 浏览器检查到manifest文件，判断文件是否被更新，如果文件未更新，触发noupdate事件，否则触发downloading事件，然后开发下载这些资源。在下载的同时，周期性地触发progress事件。
- progress ---- 见downloading。
- updateready ---- 见cached。
- cached ---- manifest文件中要求的缓存文件全部下载结束后，如果是首次缓存，触发cached事件，表示首次缓存成功，如果是更新manifest文件引起的重新下载，下载结束后不触发cached事件，而是触发updateready事件。
- error ---- 见checking。
- 首次访问网页时，依次触发的事件为：checking、downloading、progress、progress、cached
- 再次打开网页，且manifest文件没有更新时：noupdate
- 再次打开网页，且manifest文件已被更新时：downloading、progress、progress、updateready
#html5
html5 Application Cache 机制以及使用的更多相关文章
- Nginx manifest 实现 HTML5 Application Cache
什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...
- HTML5 application cache
Application Cache API (一) 基本应用 http://www.cnblogs.com/blackbird/archive/2012/06/12/2546751.html Appl ...
- html5 Application Cache——加快简历二次访问速度
上篇博客(在github上写个人简历——最简单却又不容易的内容罗列)介绍了我在github上放的一个个人在线简历,有朋友看了后告诉我一个很大缺陷,使用github挺慢的,每次看的时候都很慢,第一反应这 ...
- HTML5 Application cache初探和企业应用启示
Application Cache 在自己做的开源项目( https://github.com/etoah/Lucien ) 用到了HTML5 的Application Cache,现总结如下: 目录 ...
- HTML5应用程序缓存Application Cache
什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...
- HTML5应用程序缓存Application Cache详解
什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...
- HTML5应用程序缓存Application Cache详解.RP
什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...
- HTML5应用程序缓存Application Cache.RP
什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...
- HTML5离线缓存（Application Cache）
HTML5离线缓存又名Application Cache,是从浏览器的缓存中分出来的一块缓存区,要想在这个缓存中保存数据,可以使用一个描述文件(manifest file),列出要下载和缓存的资源. ...
随机推荐
- POJ 1815 Friendship
Friendship Time Limit: 2000MS Memory Limit: 20000K Total Submissions: 10626 Accepted: 2949 Descr ...
- Javascript模板引擎插件收集
为什么要用JS的模板引擎,打个比方,如果你要通过接口绑定数据,最终要加进去DOM中,我们普遍的做法就是不断的+,最终append进去,但是这样的做法就是后续人员压根就没法维护.所以这时模板引擎出来了. ...
- js中网页区域/正文/屏幕 宽和高
网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offs ...
- PHP导入导出excel表格图片(转)
写excel的时候,我用过pear的库,也用过pack压包的头,同样那些利用smarty等作的简单替换xml的也用过,csv的就更不用谈了.呵呵.(COM方式不讲了,这种可读的太多了,我也写过利用wp ...
- Oracle修改字段类型方法总结
有一个表名为tb,字段段名为name,数据类型nchar(20). 1.假设字段数据为空,则不管改为什么字段类型,可以直接执行:alter table tb modify (name nvarchar ...
- 语言模型kenlm的训练及使用
一.背景 近期研究了一下语言模型,同事推荐了一个比较好用的工具包kenlm,记录下使用过程. 二.使用kenlm训练 n-gram 1.工具介绍:http://kheafield.com/code/k ...
- jQuery中Animate进阶用法（一）
jQuery中animate的用法你了解多少呢?如果仅仅是简单的移动位置,显示隐藏,哦!天哪你在浪费资源!因为animate太强大了,你可以有很多意想不到的用法!让我们一起研究一下吧~~ 首先要了解j ...
- Ubuntu Server 12.04下部署glusterfs
1.安装环境 Linux:Ubuntuserver 12.04.1 LTS 64bit 2台 分布式文件系统:Gluster 测试环境:一台作文件服务器端(192.168.56.133),一台作客户端 ...
- prototype,__proto__,constructor
proto属性: 所有对象都有此属性.但它不是规范里定义的属性,并不是所有JavaScript运行环境都支持.它指向对象的原型,也就是你说的继承链里的原型.通过Object.getPrototypeO ...
- DIV+CSS布局中主要CSS属性介绍
Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...