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),列出要下载和缓存的资源. ...
随机推荐
- ES6入门笔记
ES6入门笔记 02 Let&Const.md 增加了块级作用域. 常量 避免了变量提升 03 变量的解构赋值.md var [a, b, c] = [1, 2, 3]; var [[a,d] ...
- MediaElement 的两种模式
MediaElement 是一个 UIElement,它受 布局系统 支持并可用作许多控件的内容.它也可用在可扩展应用程序标记语言 (XAML) 以及代码中.另一方面,MediaPlayer 用于 D ...
- [Android]ListView学习笔记
基本用法流程 创建Adapter并且派生自BaseAdapter,实现其必要的接口方法 将创建的Adapter分配给ListView对象:mPhoneBookListView.setAdapter(p ...
- getElementsByClassName简单实现
function getElementsByClassName(node, className) { var aClassReg = className.split(' ').map(function ...
- js像素运算问题
通过DOM获取的某一距离属性(比如left)是带px单位的,直接对其算术运算不起效,要先把获取到的值处理一下去掉px单位. 方法一(用处理字符串的方式去除px): var x=document.get ...
- SPSS课程学习思路及流程
数据挖掘领域对行的分析
- 在Android中Intent的概念及应用(二)——Intent过滤器相关选项
一.如果多个Activity拥有同一个Intent Action,启动时用同一个Action启动会是什么情况? 如何指定某一个Activity启动? 在多个Activity拥有同一个Intent Ac ...
- AD域组策略-只显示指定的控制面板选项配置方法
操作方法: 1.打开组策略管理器,新建一个组策略并右击编辑. 2,找到隐藏指定的“控制面板”项并双击打开:并参照设置: 填入要显示的控制面板项目,比如: joystick.cpl 表示将显示“游戏控制 ...
- [老文章搬家] 关于 Huffman 编码
按:去年接手一个项目,涉及到一个一个叫做Mxpeg的非主流视频编码格式,编解码器是厂商以源代码形式提供的,但是可能代码写的不算健壮,以至于我们tcp直连设备很正常,但是经过一个UDP数据分发服务器之后 ...
- 取代 Windows Search
windows自带的搜索工具太难用了,总是在你急需的时候提示还没有建立索引,眼皮底下的文件都找不到. 1. everything 适合快速搜索文件名 优点是速度快,非常快,几乎是瞬间就建立好了索引. ...