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),列出要下载和缓存的资源. ...
随机推荐
- ERwin入门
1.菜单介绍 2.选择建模语言符号
- ES6入门笔记
ES6入门笔记 02 Let&Const.md 增加了块级作用域. 常量 避免了变量提升 03 变量的解构赋值.md var [a, b, c] = [1, 2, 3]; var [[a,d] ...
- MySQL 新装数据库不能链接解决方法
在my.ini的[mysqld]字段加入: skip-grant-tables 重启mysql服务,这时的mysql不需要密码即可登录数据库 然后进入mysql mysql>use mysql; ...
- js键盘事件和焦点事件
键盘事件onkeydown //当键盘按下的时候触发onkeyup //但键盘抬起的时候触发event.keyCode //数字类型 键盘按键的键值功能键 ctrlkey shiftkey altke ...
- 总结：JSP几种提交表单方法
问题描述: 最近进了一家“老公司”工作,说他老不是说他成立的早,是因为他的编程框架太l.......low了.EJB的规范模式,使用是IBM经过Eclipse二次开发出来的RAD(Rational A ...
- C语言基础(11)-随机数发生器
一. rand() rand是一个C语言库函数,功能是生成一个随机数.rand需要一个不同的种子,才能生成不同的随机数. 二. srand(int seed) rand需要一个不同的种子,才能生成不同 ...
- EntityFramework 优化建议
Entity Framework目前最新版本是6.1.3,当然Entity Framework 7 目前还是预览版,并不能投入正式生产环境,估计正式版16年第一季度会出来,了解过EF7的部分新特性后, ...
- 现代软件工程作业 第二章 Github的使用
Github的使用 创建团队 Github首页点击Create Orginazation,出现如下界面: 填写相关信息,邀请团队成员: 点击确认,创建团队完成,界面如下: 创建新的版本库 点击Crea ...
- 高可用mysql之MHA的原理
MHA 如何工作的? MHA是如何工作的? ============================================================================== ...
- mysql 优化
1.存储过程造数据 CREATE DEFINER=`root`@`localhost` PROCEDURE `generate_test_data`(`n` int) begin declare i ...