HTML5有一个新特性,支持离线缓存,便于开发离线应用。
经过了一些小波折,自己这边也写了一个可以成功运行的demo。部署在tomcat下。

1.第一步:在tomcat下的conf/web.xml添加一个mime_type。

<mime-mapping>
<extension>manifest</extension>
<mime-type>text/cache-manifest</mime-type>
</mime-mapping>
2.编写.manifest文件。
文件名可以随便命名,我的是test.manifest
文件内容:

CACHE MANIFEST
#version 1.3
CACHE:
	platform/skins/skin1/images/bg/login_bg_1x.jpg
	platform/skins/skin1/images/bg/login_bg_2x.jpg
	platform/skins/skin1/images/bg/login_bg_3x.jpg
	platform/scripts/index/login.js
NETWORK:
	*
FALLBACK:

3.编写离线缓存的HTML文件

我的test.manifest是放在webapp下面,其他路径请自行修改路径

<!DOCTYPE html>
<html manifest="test.manifest">
<head>
<meta charset="UTF-8">
<title>HTML5特性之离线缓存V3.7 </title>
</head>
<body>
</body>
</html>


补充一些参数说明

HTML5 离线缓存demo在tomcat下的部署HTML5 离线缓存demo在tomcat下的部署HTML5 离线缓存demo在tomcat下的部署HTML5 离线缓存demo在tomcat下的部署HTML5 离线缓存demo在tomcat下的部署HTML5 离线缓存demo在tomcat下的部署

HTML5 离线缓存demo在tomcat下的部署HTML5 离线缓存demo在tomcat下的部署HTML5 离线缓存demo在tomcat下的部署HTML5 离线缓存demo在tomcat下的部署

HTML5 离线缓存demo在tomcat下的部署HTML5 离线缓存demo在tomcat下的部署HTML5 离线缓存demo在tomcat下的部署HTML5 离线缓存demo在tomcat下的部署HTML5 离线缓存demo在tomcat下的部署HTML5 离线缓存demo在tomcat下的部署


个人测试结果:

注意:

1.缓存了的话,离线状态下是可以访问的。

2.从离线切换为在线状态当前页面访问的仍然是缓存,如果需要变化为访问在线文件需要修改.manifest的版本号,修改版本后该页面就会从新被更新,可以尝试在该页面书写alert进行测试。

3.但是更新了.manifest版本号后图片并不会更新,例如之前访问的img1,后续将宁一个img1覆盖当前img1,页面上的图片是不会更新的,如果希望更新img需要把缓存文件中该img1删除掉,从新访问,然后再次访问才会更新。(这个问题在公司电脑上测试的结果,后续在自己电脑上重新建了个测试应用测试的结果是更新manifest图片是能够更新,公司应用图片不更新应该是由于其它原因导致的,暂时未找到原因,暂时不纠结)

4.引用的js文件只需要更新版本号就会被更新。

5.每次更新manitest文件都需要刷新两次页面才能够更新缓存。

更新后第一次访问:

HTML5 离线缓存demo在tomcat下的部署HTML5 离线缓存demo在tomcat下的部署

更新后第二次访问:

HTML5 离线缓存demo在tomcat下的部署HTML5 离线缓存demo在tomcat下的部署


总结:由此可知,使用application来缓存js和css文件应该是可以达到提高访问速度的效果,宁外需要注意

的是application会将当前页面缓存,所以如果使用application的话,如果你的页面是动态的话需要使用ajax去实现动态,否则会读取缓存

无法动态。宁外一点值得注意的是application cache缓存无法单独更新某个js或css文件,只要.manifest被修改,里面缓存的文件都将重

新被下载。



通过JS动态控制更新
应用在离线后将保持缓存状态,除非发生以下某种情况:
用户清除了浏览器对您网站的数据存储。
清单文件经过修改。请注意:更新清单中列出的某个文件并不意味着浏览器会重新缓存该资源。清单文件本身必须进行更改。

缓存状态:

window.applicationCache 对象是对浏览器的应用缓存的编程访问方式。其 status 属性可用于查看缓存的当前状态:

var appCache = window.applicationCache;  
switch (appCache.status) {  
  case appCache.UNCACHED: // UNCACHED == 0  
    return 'UNCACHED';  
    break;  
  case appCache.IDLE: // IDLE == 1  
    return 'IDLE';  
    break;  
  case appCache.CHECKING: // CHECKING == 2  
    return 'CHECKING';  
    break;  
  case appCache.DOWNLOADING: // DOWNLOADING == 3  
    return 'DOWNLOADING';  
    break;  
  case appCache.UPDATEREADY:  // UPDATEREADY == 4  
    return 'UPDATEREADY';  
    break;  
  case appCache.OBSOLETE: // OBSOLETE == 5  
    return 'OBSOLETE';  
    break;  
  default:  
    return 'UKNOWN CACHE STATUS';  
    break;  
};  

HTML5 离线缓存demo在tomcat下的部署HTML5 离线缓存demo在tomcat下的部署HTML5 离线缓存demo在tomcat下的部署HTML5 离线缓存demo在tomcat下的部署


请注意:使用 update() 和 swapCache() 不会向用户提供更新的资源。此流程只是让浏览器检查是否有新的清单、下载指定的更新内容以及重新填充应用缓存。因此,还需要对网页进行两次重新加载才能向用户提供新的内容,其中第一次是获得新的应用缓存,第二次是刷新网页内容。

好消息是,您可以避免重新加载两次的麻烦。要使用户更新到最新版网站,可设置监听器,以监听网页加载时的 updateready 事件:
//Check if a new cache is available on page load.  
window.addEventListener('load', function(e) {  
  window.applicationCache.addEventListener('updateready', function(e) {  
    if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {  
      // Browser downloaded a new app cache.  
      // Swap it in and reload the page to get the new hotness.  
      window.applicationCache.swapCache();  
      if (confirm('A new version of this site is available. Load it?')) {  
        window.location.reload();  
      }  
    } else {  
      // Manifest didn't changed. Nothing new to server.  
    }  
  }, false);  
}, false);  

applicationCache缓存对象的事件如下表所示:

事件名称

说明

Checking

当user agent检查更新时,或者第一次下载manifest清单时,它往往是第一个被触发的事件

Noupdate

当检查到Manifest中清单文件不需要更新时,触发该事件

Downloading

第一次下载或更新manifest清单文件时,触发该事件

Progress

该事件与downloading类似,但downloading事件只触发一次。Progress事件则在清单文件下载过程中周期性触发

Cached

当manifest清单文件下载完毕及成功缓存后,触发该事件

Upadateready

此事件的含义表示缓存清单文件已经下载完毕,可通过重新加载页面读取缓存文件或者通过方法swapCache切换到新的缓存文件。常用语本地缓存跟新版本后的提示

Obsolete

加入访问manifest缓存文件返回HTTP404错误(页面未找到)或者410错误(永久消失)时,触发该事件

Error

若要达到触发该事件,需要满足一下几种情况之一:

1、已经触发obsolete事件

2、manifest文件没有改变,但缓存文件中存在文件下载失败

3、获取manifest资源文件时发生致命错误。

4、当更新本地缓存时,manifest文件再次被更改。

 



通过对这些事件的监听处理能更好的控制应用程序文件的缓存、更新。

7.一个简单的离线缓存的应用
建一个web工程AppCache,包括四个文件:
appcache_offline.html


接下来值得注意的是,在平时的开发过程中,在使用applicationCache本地缓存的同时,往往需要判断当前浏览器的状态(在线或离线)。HTML5正好提供了一个属性,用于判断当前浏览器是否在线,代码如下:

windowz.navigator.onLine

如果返回ture,则说明当前浏览器online,返回false则说明当前浏览器offline



一些问题

更新机制来说,首次更新manifest时,因为页面加载已经开始甚至已经完成,缓存更新尚未完成,浏览器仍然会使用过期的资源;浏览器是当Application Cache有更新时,该次不会使用新资源,第二次才会使用。这个时候update事件中执行window.reload事件。

window.applicationCache.addEventListener("updateready", function(){
    window.location.reload()
});


补充测试:带有applicationcache缓存的页面(demo1.jsp)嵌入一个iframe,iframe里面的页面(demo2.jsp)不带缓存

测试结果:

1.demo1.jsp页面是可以被缓存的,demo2.jsp是不会被缓存的。

2.当demo1.jsp和demo2.jsp都包含img1.png时如果此时修改img1.png则demo1.jsp和demo2.jsp均会变化为修改后的图片,离线后demo1.jsp仍可以以最后的形式查看,而demo2.jsp则报错,

则说明demo1.jsp中的缓存图片会跟着更新。

3.当demo1.jsp和demo2.jsp都引入了相同的demo.js时,如果修改demo.js,此时demo1.jsp中的demo.js不会改变读取的还是缓存,而demo2.jsp中的demo.js却会被修改,说明demo2.jsp中的

demo.js不能从缓存中读取。当demo.js离线时(改个名字即可),demo1.jsp中引入的demo.js还可以执行,而demo2.jsp中的demo.js却报错这个也证明了上面的观点。



参考博文记录:

http://blogread.cn/it/article/7176

http://blog.csdn.net/fwwdn/article/details/8082433

http://www.cnblogs.com/yexiaochai/p/4271834.html

https://www.w3.org/TR/2012/WD-html5-20120329/offline.html#offline




作者:星辰 时间:2016-11-25 浏览 779评论 0 赞 0砸 0 标签: HTML5
评论
还可以再输入500个字

请您注意

·自觉遵守:爱国、守法、自律、真实、文明的原则
·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·您在NoteShare上发表的作品,NoteShare有权在网站内保留、转载、引用或者删除
·参与本评论即表明您已经阅读并接受上述条款