一 应用缓存(Application Cache)
1 应用缓存
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：
- 离线浏览 - 用户可在应用离线时使用它们
- 速度 - 已缓存资源加载得更快
- 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
2 浏览器支持
、
FireFox浏览器查看页面缓存：
在FireFox浏览器中输入: about:cache
FireFox ->选项->高级
Chrome浏览器查看页面缓存：
在Chrome浏览器中输入: about:cache 或 chrome://cache/
Chrome -> 更多工具 -> 开发者工具 -> Resources
3 离线服务器配置
实验使用的离线服务器是 Tomcat8, 离线应用的服务器需要设置mime类型，才可以支持缓存,具体配置如下：
在tomcat根目录 -> conf -> web.xml 中的<web-app>内添加以下配置信息。
<!-- support Html5 applicationCache -->
<mime-mapping>
<extension>manifest</extension>
<mime-type>text/cache-manifest</mime-type>
</mime-mapping>
注意:
manifest文件后缀需要与<extension>中的内容相同,上面配置为manifest,所有manifest文件也应该为xxx.manifest, 比如 offline.manifest, cache.manifest .
4 带有 cache manifest 的 HTML 文档（供离线浏览）
下面的例子展示了带有 cache manifest 的 HTML 文档（供离线浏览）：
<!DOCTYPE HTML>
<html manifest="demo.manifest">
<body>
The content of the document......
</body>
</html>
如需启用应用程序缓存，请在文档的 <html> 标签中包含 manifest 属性，如需启用应用程序缓存，请在文档的 <html> 标签中包含 manifest 属性，每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）
manifest 文件的扩展名需要与服务器配置的扩展名一致。
5 Manifest 文件
manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
manifest 文件可分为三个部分：
- CACHE 在此标题下列出的文件将在首次下载后进行缓存
- NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
- FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
MANIFEST文件第一行中的 CACHE MANIFEST 是必需的。 注释必须以”#”开头
CACHE MANIFEST
###version 1.0 CACHE:
clock.html
clock.css
clock.js
waitan.jpg
5.1 CACHE
上面的 manifest 文件列出了四个资源：一个 html文件，一个 CSS 文件，一个jpg 图像，以及一个 JavaScript 文件。当 manifest 文件加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然是可用的。
新建web工程,把缓存的文件放在 web工程的cache1目录下，建立样式，html,js和图片资源。
clock.html
<!DOCTYPE html>
<html manifest="clock.mainifest" > <head>
<meta charset="UTF-8">
<title>clock</title>
</head>
<link rel="stylesheet" href="clock.css" />
<body> <div id="main">
<img src="./waitan.jpg"/>
</div>
<p>
The time is : <output id="clock"></output>
</p> <script type="text/javascript" src="clock.js"></script>
<script type="text/javascript">
window.onload = function() {
startTime();
}
</script>
</body>
</html>
clock.css
#main {
background-color: olive;
width: 500px;
height: 300px;
border: 5px solid yellow;
}
#clock {
background-color: yellow;
font-size: 50px;
}
clock.js
function startTime() {
setInterval(function() {
var clock = document.getElementById("clock");
clock.value = new Date();
}, );
}
noCacheClock.html
<!DOCTYPE html>
<html > <head>
<meta charset="UTF-8">
<title></title>
</head>
<link rel="stylesheet" href="clock.css" />
<body> <div id="main">
<img src="./waitan.jpg"/> </div>
<p>
The time is : <output id="clock"></output>
</p> <script type="text/javascript" src="clock.js"></script>
<script type="text/javascript"> window.onload = function() {
startTime();
}
</script>
</body>
</html>
clock.mainifest
CACHE MANIFEST
###version 1.0 CACHE:
clock.html
clock.css
clock.js
waitan.jpg
实验1：将服务器停止，访问缓存页面 clock.html，查看其是否还能正常显示。
在服务器运行中，修改 clock.html页面内容，然后刷新页面查看页面是否发生变化。
实验2：将服务器停止，访问非缓存页面 noCacheClock.html ，查看其是否还能正常显示。
注意： 在浏览器输入 about:cache,查看文件是否缓存成功，然后按住 ctrl + alt + del清空缓存，在查看缓存文件是否还能正常访问。
FireFox下缓存文件如下图所示：
Chrome下缓存文件如下图所示：
5.2 NETWORK
下面的 NETWORK 规定文件 "online.html" 永远不会被缓存，且离线时是不可用的：
注意： NETWORK部分罗列的资源，无论缓存中存在与否，均很网络获取。
CACHE MANIFEST
###version 1.0 CACHE:
clock.html
clock.css
clock.js
waitan.jpg NETWORK:
online.html
可以使用星号来指示所有其他资源/文件都需要因特网连接：
CACHE MANIFEST
###version 1.0 CACHE:
clock.html
clock.css
clock.js
waitan.jpg NETWORK:
*
实验3：将服务器停止，访问缓存页面 online.html，查看其是否还能正常显示。
online.html
<!DOCTYPE html>
<html>
<head>
<title>online.html</title>
<meta name="content-type" content="text/html; charset=UTF-8">
</head> <body>
<h1>oneline !</h1>
<h2>oneline !</h2>
<h3>oneline !</h3>
</body>
</html>
修改clock.mainifest的内容如下：
CACHE MANIFEST
###version 1.0 CACHE:
clock.html
clock.css
clock.js
waitan.jpg NETWORK:
online.html
5.3 FALLBACK
FALLBACK部分提供了获取不到缓存资源时的备选资源。 规定如果无法建立因特网连接，则用 "404" 替代 / 目录中的所有文件：
clock.mainifest
CACHE MANIFEST
###version 1.0 CACHE:
clock.html
clock.css
clock.js
waitan.jpg NETWORK:
online.html FALLBACK:
/ .html
尝试使用另外的离线配置清单
CACHE MANIFEST
###version 1.0 CACHE:
clock.css
clock.js
waitan.jpg #### 不需要缓存的资源
NETWORK:
online.html ### 访问缓存失败后，备用访问的资源，第一个是访问源，第二个是替换文件
FALLBACK:
/MobileWeb0927/cache .html
404.html
<html><head>
<meta http-equiv="content-type" content="text/html; charset=GB2312">
<title> NOT FOUND</title>
</head> <body bgcolor="linen" text="black">
<div style="font-size: 400px; text-align: center;"></div>
<div style="font-size: 128px; text-align: center; font-variant: small-caps;">Not Found</div>
<div style="text-align: center;">The document you requested could not be found. Please check the URL and try again. This is a recording.</div> </body></html>
实验4：将服务器停止，访问缓存页面 online.html，查看其是否还能正常显示。
实验5：将服务器停止，访问缓存页面 test.html，查看其是否还能正常显示。
test.html
<!DOCTYPE html>
<html>
<head>
<title>test.html</title>
<meta name="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<h1>test.html</h1>
<h2>test.html</h2>
<h3>test.html</h3> </body>
</html>
然后把在 web工程中WebRoot下 cache1目录中新建一个文件夹html,把test.html放入html目录中。修改缓存清单文件 clock.mainifest：
FALLBACK:
/ .html
/cache1/html .html
实验6：将服务器停止，访问文件夹cache1/html下的缓存页面 test.html，查看其是否还能正常显示。
使用的访问路径如下所示：
http://127.0.0.1:8080/TestH5/cache1/clock.html
http://127.0.0.1:8080/TestH5/cache1/online.html
http://127.0.0.1:8080/TestH5/cache1/test.html
http://127.0.0.1:8080/TestH5/cache1/html/test.html
二 ApplicationCache API
1 离线事件
2 离线状态
对应的方法如下：
function initCheckApplicationEvent(){
var msg=document.getElementById("msg");
applicationCache.addEventListener("checking", function() {
msg.innerHTML+="checking<br/>";
}, true);
applicationCache.addEventListener("noupdate", function() {
msg.innerHTML+="noupdate<br/>";
}, true);
applicationCache.addEventListener("downloading", function() {
msg.innerHTML+="downloading<br/>";
}, true);
applicationCache.addEventListener("progress", function() {
msg.innerHTML+="progress<br/>";
}, true);
applicationCache.addEventListener("updateready", function() {
msg.innerHTML+="updateready<br/>";
}, true);
applicationCache.addEventListener("cached", function() {
msg.innerHTML+="cached<br/>";
}, true);
applicationCache.addEventListener("error", function() {
msg.innerHTML+="error<br/>";
}, true);
}
3 更新缓存方法
对应的方法如下：
function updateApplicationCache() {
var appCache = window.applicationCache;
appCache.update(); // Attempt to update the user's cache.
if (appCache.status == window.applicationCache.UPDATEREADY) {
appCache.swapCache(); // The fetch was successful, swap in the new cache.
}
}
请注意：以这种方式使用 update() 和 swapCache() 不会向用户提供更新的资源。此流程只是让浏览器检查是否有新的清单、下载指定的更新内容以及重新填充应用缓存。因此，还需要对网页进行两次重新加载才能向用户提供新的内容，其中第一次是获得新的应用缓存，第二次是刷新网页内容。
实验7：将服务器运行中，修改clock.htm和clock.mainifest ,然后刷新页面，查看clock.html是否保持最新的状态。
clock.html
<!DOCTYPE html>
<html manifest="clock.mainifest"> <head>
<meta charset="UTF-8">
<title>clock</title>
</head>
<link rel="stylesheet" href="clock.css" />
<body> <div id="main">
<img src="./waitan.jpg" /> </div>
<p>
The time is :
<output id="clock"></output>
</p>
<p>
#version 1.1111
</p>
<p id="msg"></p> <input type="button" value="updateApplicationCache" onclick="updateApplicationCache()"/> <script type="text/javascript" src="clock.js"></script>
<script type="text/javascript"> window.onload = function() {
console.log("------------- offline ready-----------");
startTime();
initCheckApplicationEvent();
} function updateApplicationCache() {
var appCache = window.applicationCache;
appCache.update(); // Attempt to update the user's cache. if (appCache.status == window.applicationCache.UPDATEREADY) {
appCache.swapCache(); // The fetch was successful, swap in the new cache.
}
} function initCheckApplicationEvent(){
var msg=document.getElementById("msg");
applicationCache.addEventListener("checking", function() {
msg.innerHTML+="checking<br/>";
}, true);
applicationCache.addEventListener("noupdate", function() {
msg.innerHTML+="noupdate<br/>";
}, true);
applicationCache.addEventListener("downloading", function() {
msg.innerHTML+="downloading<br/>";
}, true);
applicationCache.addEventListener("progress", function() {
msg.innerHTML+="progress<br/>";
}, true);
applicationCache.addEventListener("updateready", function() {
msg.innerHTML+="updateready<br/>";
}, true);
applicationCache.addEventListener("cached", function() {
msg.innerHTML+="cached<br/>";
}, true);
applicationCache.addEventListener("error", function() {
msg.innerHTML+="error<br/>";
}, true);
} </script>
</body> </html>
clock.mainifest
CACHE MANIFEST
###version 1.111 CACHE:
clock.html
clock.css
clock.js
waitan.jpg NETWORK:
online.html FALLBACK:
/ .html
/cache1/html .html
另外的实验缓存清单。
CACHE MANIFEST
###version 1.0 CACHE:
clock.css
clock.js
waitan.jpg #### 不需要缓存的资源
NETWORK:
online.html ### 访问缓存失败后，备用访问的资源，第一个是访问源，第二个是替换文件
FALLBACK:
/MobileWeb0927/cache .html
参考资料：
http://www.w3school.com.cn/html5/html_5_app_cache.asp
http://jingyan.baidu.com/article/fa4125acd9baf828ac709286.html
http://www.jb51.net/html5/67850.html