您的位置：首页 > 移动开发

HTML5学习总结-08 应用缓存(Application Cache)

2016-09-10 14:51 344 查看

一应用缓存(Application Cache)

1 应用缓存

　　HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

　　应用程序缓存为应用带来三个优势：

离线浏览 - 用户可在应用离线时使用它们

速度 - 已缓存资源加载得更快

减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

2 浏览器支持

、

　　FireFox浏览器查看页面缓存：

在FireFox浏览器中输入: [b]about:cache
[/b]

　　FireFox ->选项->高级

　　Chrome浏览器查看页面缓存：

在Chrome浏览器中输入: [b]about:cache[/b] 或 [b]chrome://cache/
[/b]

　　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();
}, 1000);
}

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:
/ 404.html

　　尝试使用另外的离线配置清单

CACHE MANIFEST
###version 1.0 333

CACHE:
clock.css
clock.js
waitan.jpg

#### 不需要缓存的资源
NETWORK:
online.html

### 访问缓存失败后，备用访问的资源，第一个是访问源，第二个是替换文件
FALLBACK:
/MobileWeb0927/cache 404.html

404.html

<html><head>
<meta http-equiv="content-type" content="text/html; charset=GB2312">
<title>404 NOT FOUND</title>
</head>

<body bgcolor="linen" text="black">
<div style="font-size: 400px; text-align: center;">404</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:
/ 404.html
/cache1/html 404.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[/code] 
二 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:
/ 404.html
/cache1/html 404.html


另外的实验缓存清单。

CACHE MANIFEST
###version 1.0 333

CACHE:
clock.css
clock.js
waitan.jpg

#### 不需要缓存的资源
NETWORK:
online.html

### 访问缓存失败后，备用访问的资源，第一个是访问源，第二个是替换文件
FALLBACK:
/MobileWeb0927/cache 404.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