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),列出要下载和缓存的资源. ...
随机推荐
- UOJ58 【WC2013】糖果公园
本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...
- 源码编译安装postgresql
依赖的库:libreadline-dev,zlib1g-dev 安装:下载解压源码包,然后 ./configure,make,make install即可.. 注意不能在root账户下跑server, ...
- django 关于html、css、js 目录位置
项目目录: project/ ---------------init.py ---------------views.py ---------------settings.py ----------- ...
- [bigdata] hadoop 参数配置解析
ResourceManager相关配置参数 yarn-site.xml 中配置 yarn.resourcemanager.address ResourceManager 对客户端暴露的地址.客户端通过 ...
- SQL中distinct的用法
SQL中distinct的用法 1.作用于单列 2.作用于多列 3.COUNT统计 4.distinct必须放在开头 5.其他 在表中,可能会包含重复值.这并不成问题,不过,有时您也许希望仅仅列出 ...
- mybatis.net 多表联查
mybatis.net针对多表联查,其实不用讲联查出的所有的列全部做一个新的resultMap,我们完全可以通过集成关系来实现,真是上一次说的懒加载,在一定程度上可以提高其性能,但这并不是说懒加载性能 ...
- thinkphp模型
1.获取系统常量信息的方法:在控制器DengLuController里面下写入下面的方法,然后调用该方法. public function test() { //echo "这是测试的&qu ...
- macOS Sierra U盘USB启动安装盘
http://www.iplaysoft.com/macos-usb-install-drive.html 文章里提供了一个软件可以自动化操作,但是试了下,不行,试了两三次还是不行,只有参照文章中的第 ...
- 使用sublime一键格式化XML文件
1 sublime简介 sublime是一款代码编辑和阅读软件,体积小,运行快,界面非常简洁漂亮.官方地址:https://www.sublimetext.com/ 2 在sublime上安装插件 使 ...
- Python *与** 参数问题
问题: Python的函数定义中有两种特殊的情况,即出现*,**的形式. 如:def myfun1(username, *keys)或def myfun2(username, **ke ...