applicationCache是html5新增的一个离线应用功能

  • 离线浏览: 用户可以在离线状态下浏览网站内容。
  • 更快的速度: 因为数据被存储在本地，所以速度会更快.
  • 减轻服务器的负载: 浏览器只会下载在服务器上发生改变的资源。

在对应用进行缓存的时候需要一个manifest文件，

cache manifest 格式如下

首行必须是CACHE MANIFEST

接下来可以分为三段： CACHE， NETWORK，与 FALLBACK

CACHE:
这是缓存文件中记录所属的默认段落。在 CACHE: 段落标题后(或直接跟在 CACHE MANIFEST 行后)列出的文件会在它们第一次下载完毕后缓存起来。
NETWORK:
在 NETWORK: 段落标题下列出的文件是需要与服务器连接的白名单资源。所有类似资源的请求都会绕过缓存，即使用户处于离线状态。可以使用通配符。
FALLBACK:
FALLBACK: 段指定了一个后备页面，当资源无法访问时，浏览器会使用该页面。该段落的每条记录都列出两个 URI—第一个表示资源，第二个表示后备页面。两个 URI 都必须使用相对路径并且与清单文件同源。可以使用通配符。

CACHE， NETWORK， 和 FALLBACK 段落可以以任意顺序出现在缓存清单文件中，并且每个段落可以在同一清单文件中出现多次。

好了基础都已经有,上个栗子

我新建了一个java web项目

applicationcache/

├── static/

│   ├── css/

│   │ └── example.css

│   └── js/

│     └── example.js

└── index.jsp

 

#代码如下

#example.css

#clock { font: 2em sans-serif; } 

 

#example.js

window.onload = function(){

	　　window.onload = function(){

	　　　　setInterval(function(){

		　　　　　　document.getElementById('clock').innerHTML = new Date();

	　　　　},1000);

　　};

};

 

#index.jsp

<link type="text/css" href="static/css/example.css" rel="stylesheet"/>

<script src="static/js/example.js"></script>

<div id="clock"></div>

好了，现在我把项目跑起来是这样子的

然后我把项目服务停了，访问是这样子的

好了，我们在加上一个html5新增的神器manifest文件

文件添加在static文件夹下，文件内容如下

#example.manifest

CACHE MANIFEST

./js/example.js

../index.jsp

NETWORK:

./css/exmaple.css

这时需要修改index.jsp文件内容
<html> --> <html manifest="static/example.manifest">

文件说明对js和jsp进行缓存，而css文件则列入白名单不缓存，再次启动服务。。。。

访问的时候你看到的页面是没任何变化的，跟第一次访问的页面是一个鸟样的，不过你按下F12就会看到

浏览器已经对的的文件进行缓存了

在resources->application cache选项下可以看到浏览器缓存的是什么东东，也可以使用 chrome://appcache-internals/ 命令在Chrome浏览器中进行查看删除

好了见证奇迹的时刻到了，我再次把服务停了。。。。。。再次访问，竟然可以访问到，不会像第一次那样提示挂了

但是样式没了。。。那就是我们刚刚把样式置为白名单了，没有缓存下来

如果你的manifest文件修改了，你可以手动或自动更新它

  1. 自动更新

    浏览器除了在第一次访问 Web 应用时缓存资源外，只会在 cache manifest 文件本身发生变化时更新缓存。而 cache manifest 中的资源文件发生变化并不会触发更新。

  2. 手动更新

    开发者也可以使用 window.applicationCache 的接口更新缓存。方法是检测 window.applicationCache.status 的值，如果是 UPDATEREADY，那么可以调用 window.applicationCache.update() 更新缓存。示范代码如下。

if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {

　　window.applicationCache.update();

}
applicationCache状态值

UNCACHED(未缓存)　　一个特殊的值，用于表明一个应用缓存对象还没有完全初始化。

IDLE(空闲)　　应用缓存此时未处于更新过程中。

CHECKING(检查)　　清单已经获取完毕并检查更新。

DOWNLOADING(下载中)　　下载资源并准备加入到缓存中，这是由于清单变化引起的。

UPDATEREADY(更新就绪)　　一个新版本的应用缓存可以使用。有一个对应的事件 updateready，当下载完毕一个更新，并且还未使用 swapCache() 方法激活更新时，该事件触发，而不会是 cached 事件。

OBSOLETE(废弃)　　应用缓存现在被废弃。

也可以在线状态检测

  1. navigator.onLine

    navigator.onLine 属性表示当前是否在线。如果为 true, 表示在线；如果为 false, 表示离线。当网络状态发生变化时，navigator.onLine 的值也随之变化。开发者可以通过读取它的值获取网络状态。

  2. online/offline 事件

    当开发离线应用时，通过 navigator.onLine 获取网络状态通常是不够的。开发者还需要在网络状态发生变化时立刻得到通知，因此 HTML5 还提供了 online/offline 事件。当在线 / 离线状态切换时，online/offline 事件将触发在 body 元素上，并且沿着 document.body、document 和 window 的顺序冒泡。因此，开发者可以通过监听它们的 online/offline 事件来获悉网络状态。

本人只是简单记录，欢迎大神指正。

参考：

中文

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Using_the_application_cache#.E5.8A.A0.E8.BD.BD.E6.96.87.E6.A1.A3  使用应用缓存

https://developer.mozilla.org/zh-CN/docs/Online_and_offline_events   在线和离线事件

http://www.ibm.com/developerworks/cn/web/1011_guozb_html5off/

英文

https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache 使用应用缓存，跟上面中文一个连接

下载栗子

web离线应用--applicationCache的更多相关文章

  1. web离线应用

    其实浏览器一直都是前端开发人员比较头痛的一个课题,各种兼容性.直到开始规范化和标准化,HTML5的出现. 在没有这套标准出现之前,对于客户端缓存的问题,我们基本上都是用cookie处理,当然目前除了后 ...

  2. localForage——轻松实现 Web 离线存储

    Web 应用程序有离线功能,如保存大量数据集和二进制文件.你甚至可以做缓存 MP3 文件这样的事情.浏览器技术可以保存离线数据和大量的储存.但问题是,如何选择合适技术,如何方便灵活的实现. 如果你需要 ...

  3. web离线应用--dom storage

    web离线应用--dom storage dom storage是html5添加的新功能,其实也不是什么新的应用,只不过是cookie的放大版本,由于cookie的大小只有4kb,而且在每次请求一个新 ...

  4. 文档通信(跨域-不跨域)、时时通信(websocket)、离线存储(applicationCache)、开启多线程(web worker)

    一.文档间的通信 postMessage对象 //不跨域 1.iframe:obj.contentWindow [iframe中的window对象] iframe拿到父级页面的window: pare ...

  5. Web离线存储的几种方式

    随着HTML5的正式定稿,我们也可以大量使用HTML离线网络应用程序的特性. #1.Application Cache Application Cache 可以很简单让我们的WebApp具有离线的能力 ...

  6. localForage——轻松实现 Web 离线存储（转）

    localStorage 能够让你实现基本的数据存储,但它的速度慢,而且不能处理二进制数据.IndexedDB 和 WebSQL 是异步的,速度快,支持大数据集,但他们的API 使用起来有点复杂.不仅 ...

  7. Web离线应用解决方案——ServiceWorker

    什么是ServiceWorker 在介绍ServiceWorker之前,我们先来谈谈PWA.PWA (Progressive Web Apps) 是一种 Web App 新模型,并不是具体指某一种前沿 ...

  8. web离线应用 Web SQL Database

    web sql database 是html5废弃的一个新特性,它提供了基本的关系数据库功能,使用 `SQL` 来操纵客户端数据库的 API,这些 API 是异步的,规范中使用的方言是SQLlite ...

  9. （原创）PouchDB 图片本地存储（web离线应用）

    /* * 参数 * db: 已建或未建数据库 * pouchId: 数据库唯一的主键_id * src: 图片img的DOM对象 * bg: 判断是否是背景图 * */ function addTod ...

随机推荐

  1. Visual studio 创建项目失败vstemplate

    Visual studio 创建项目失败 提示 the vstemplate file references the wizard class 'Microsoft.VisualStudio.WinR ...

  2. 浅谈前后端分离与实践 之 nodejs 中间层服务（二）

    一.背景 书接上文,浅谈前后端分离与实践(一) 我们用mock服务器搭建起来了自己的前端数据模拟服务,前后端开发过程中只需定义好接口规范,便可以相互进行各自的开发任务.联调的时候,按照之前定义的开发规 ...

  3. fedora 19 gnome 3.8 关闭笔记本盖子的动作

    gnome-tweak-tool里没有了相关选项,但是又想让关闭盖子不挂起,后来看看才知道gnome3.8不再提供这功能,而是交给systemd来处理,所以估计用dconf-edit在gnome的po ...

  4. 如何把项目上传到GitHub上

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 } span.Apple-tab-span ...

  5. JS难点--面向对象(封装)

    我觉得js的难点之一就是面向对象编程. 面向对象 它是一种编程思想,它在写法上比面向过程相对来说复杂一些: 以下是我学习中关于面向对象的知识点总结:   1.什么是对象 从广义上说,"一切皆 ...

  6. C++const使用(06)

    可以在类中使用const关键字定义数据成员和成员函数或修饰一个对象.一个const对象只能访问const成员函数,否则将产生编译错误. 常量成员 常量成员包括常量数据成员.静态常数据成员和常引用.静态 ...

  7. mybatis generator eclipse插件的安装

    mybatis generator 可以提高开发速度,这个插件可以自动生成代码,创建DAO层相关代码,就像利用HIbernate反相生成一样,安装前可以先到百度网盘下载: 文件:MyBatisGene ...

  8. 快速部署Telegraf & Influxdb

    是什么? Telegraf 是一个用 Go 编写的代理程序,可收集系统和服务的统计数据,并写入到 InfluxDB 数据库.Telegraf 具有内存占用小的特点,通过插件系统开发人员可轻松添加支持其 ...

  9. xml文件的方式实现动态代理基于SpringAOP

    1.配置spring容器 导入jar包 com.springsource.net.sf.cglib-2.2.0.jar com.springsource.org.aopalliance-1.0.0.j ...

  10. 远程连接SQL Server 2014遇到的问题和解决

    在本机可以通过IP地址的数据库引擎登录数据库,可用同网段的其它电脑远程登录一直不成功.查看网上资料,认为是主机防火墙的问题. 在微软网站上查找相关的文档找到了答案.http://msdn.micros ...