学习HTML5 Application Cache

最新推荐文章于 2024-09-11 17:25:08 发布

生活总是这样

最新推荐文章于 2024-09-11 17:25:08 发布

阅读量256

点赞数

分类专栏：日志文章标签： java web html5

日志专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、应用场景

离线访问对基于网络的应用而言越来越重要。虽然所有浏览器都有缓存机制，但它们并不可靠，也不一定总能起到预期的作用。HTML5 使用ApplicationCache 接口解决了由离线带来的部分难题。前提是你需要访问的web页面至少被在线访问过一次。

2、使用缓存接口可为您的应用带来以下三个优势：
离线浏览 – 用户可在离线时浏览您的完整网站
速度 – 缓存资源为本地资源，因此加载速度较快。
服务器负载更少 – 浏览器只会从发生了更改的服务器下载资源。
3、离线本地存储和传统的浏览器缓存有什么不同呢？
离线存储为整个web提供服务，浏览器缓存只缓存单个页面；
离线存储可以指定需要缓存的文件和哪些文件只能在线浏览，浏览器缓存无法指定；
离线存储可以动态通知用户进行更新。
4、如何实现

离线存储是通过manifest文件来管理的，需要服务器端的支持，不同的服务器开启支持的方式也是不同的。对于Tomcat需要修改 /conf/web.xml文件，添加如下MIMEType配置:

 <mime-mapping>
        <extension>manifest</extension>
        <mime-type>text/cache-manifest</mime-type>
 </mime-mapping>

注意，<extension>manifest</extension>中内容必须和manifest文件后缀名一致。

一个典型的manifest文件应该类似这样：

CACHE MANIFEST
#文件的开头必须要书写CAHE MANIFEST
#需要在apache/conf/mime.types文件中最后一行添加text/cache-manifest  manifest
#这个是manifest文件的版本号
#version 8
CACHE:
JS/applicationCache.js
JS/script.js
images/view1.jpg
HTML5CSS3test2.jsp
NETWORK:
HTML5CSS3test3.jsp
#加上*表示加载除了上面的内容外的其他所有文件 
FALLBACK:
CACHE:
HTML5CSS3test2.jsp

其中CACHE指定需要缓存的文件；NETWORK指定只有通过联网才能浏览的文件，*代表除了在CACHE中的文件；FALLBACK每行分别指定在线和离线时使用的文件
要让manifest管理存储。

有了manifest文件后，还需要在html标签中定义manifest属性与让body自动加载JS，如下：

<!DOCTYPE html>
<html lang="en" manifest='test.manifest'>
<head>
</head>
<body οnlοad="init2()">  
</body>
</html>

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

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

function init2(){
	setInterval(function(){
		//手工检查是否有更新
		applicationCache.update();		
	},5000);
	applicationCache.addEventListener("updateready" , function(){
		if(confirm("本地缓存已被更新，需要刷新页面。是否刷新？")){
			//手工更新本地缓存
			applicationCache.swapCache();
			//重载画面
			location.reload();
		}
	},true);
}

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

好消息是，您可以避免重新加载两次的麻烦。要使用户更新到最新版网站，可设置监听器，以监听网页加载时的 updateready 事件：

当需要更新缓存时需要更新一下MANIFEST文件，比如将#v0.0.1更改为#v0.0.2