离线应用程序缓存功能允许我们指定Web应用程序所需的全部资源,
这样浏览器就能在加载HTML文档时把它们都下载下来。
1)定义浏览器缓存:
启用离线缓存——创建一个清单文件,并在html元素的manifest属性里引用它;
指定离线应用程序里要缓存的资源——在清单文件的顶部或者CACHE区域里列出资源;
指定资源不可用时要显示的备用内容——在清单文件的FALLBACK区域里列出内容;
指向始终向服务器请求的资源——在清单文件的BETWORK区域里列出内容;
示例:首先创建fruit.appcache的清单文件
CACHE MANIFEST
example.html
banana100.png
FALLBACK:
* 404.html
NETWORK:
cherries100.png
CACHE:
apple100.png
再创建404.html文件,用于链接指向的html文件不在离线缓存中就可以用它来代替
<!DOCTYPE HTML>
<html manifest="fruit.appcache">
<head>
<title>Offline</title>
</head>
<body>
<h1>您要的页面找不到了!</h1>
或许您可以帮我们找找孩子!
</body>
</html>
最后创建需要启用离线缓存的h
tml文件
<!DOCTYPE HTML>
<html manifest="fruit.appcache">
<head>
<title>Example</title>
<style>
img {border: medium double black; padding: 5px; margin: 5px;}
</style>
</head>
<body>
<img id="imgtarget" src="banana100.png"/>
<div>
<button id="banana">Banana</button>
<button id="apple">Apple</button>
<button id="cherries">Cherries</button>
</div>
<a href="otherpage.html">Link to another page</a>
<script>
var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = handleButtonPress;
}
function handleButtonPress(e) {
document.getElementById("imgtarget").src = e.target.id + "100.png";
}
</script>
</body>
</html>
2)检测浏览器状态:
window.navigator.online——如果浏览器确定为离线就返回false,如果浏览器可能在线则返回true;
3)使用离线缓存:
可以通过调用window.applicationCache属性直接使用离线缓存,它会返回一个ApplicationCache对象;
ApplicationCache对象成员:
update()——更新缓存以确保清单里的项目都已下载了最新的版本;
swapCache()——交换当前缓存与较新的缓存;
status——返回缓存的状态;
3.1)ApplicationCache对象的status属性值:
0——UNCACHED——此文档没有缓存,或者缓存数据尚未被下载;
1——IDLE——缓存没有执行任何操作;
2——CHECKING——浏览器正在检查清单或清单所指定项目的更新;
3——DOWNLOADING——浏览器正在下载清单或内容的更新;
4——UPDATEREADY——有更新后的缓存数据可用;
5——OBSOLETE——缓存数据已经废弃,不应该再使用了。这是请求清单文件时返回HTTP状态码4xx所造成的
(通常表明清单文件已被移走/删除);
3.2)ApplicationCache对象定义的事件,在缓存状态改变时触发:
checking——浏览器正在获取初始清单或者检查清单更新;
noupdate——没有更新可用,当前的清单是最新版;
downloading——浏览器正在下载清单里指定的内容;
progress——在下载阶段中触发;
cached——清单里指定的所有内容都已被下载和缓存了;
updateready——新资源已下载并且可以使用了;
obsolete——缓存已废弃;
CACHE MANIFEST
CACHE:
example.html
banana100.png
cherries100.png
apple100.png
FALLBACK:
* offline2.html
<!DOCTYPE HTML>
<html manifest="fruit.appcache">
<head>
<title>Example</title>
<style>
img {border: medium double black; padding: 5px; margin: 5px;}
div {margin-top: 10px; margin-bottom: 10px}
table {margin: 10px; border-collapse: collapse;}
th, td {padding: 2px;}
body > * {float: left;}
</style>
</head>
<body>
<div>
<img id="imgtarget" src="banana100.png"/>
<div>
<button id="banana">Banana</button>
<button id="apple">Apple</button>
<button id="cherries">Cherries</button>
</div>
<div>
<button id="update">Update</button>
<button id="swap">Swap Cache</button>
</div>
The status is: <span id="status"></span>
</div>
<table id="eventtable" border="1">
<tr><th>Event Type</th></tr>
</table>
<script>
var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = handleButtonPress;
}
window.applicationCache.onchecking = handleEvent;
window.applicationCache.onnoupdate = handleEvent;
window.applicationCache.ondownloading = handleEvent;
window.applicationCache.onupdateready = handleEvent;
window.applicationCache.oncached = handleEvent;
window.applicationCache.onobselete = handleEvent;
function handleEvent(e) {
document.getElementById("eventtable").innerHTML +=
"<tr><td>" + e.type + "</td></td>";
checkStatus();
}
function handleButtonPress(e) {
switch (e.target.id) {
case 'swap':
window.applicationCache.swapCache();
break;
case 'update':
window.applicationCache.update();
checkStatus();
break;
default:
document.getElementById("imgtarget").src = e.target.id
+ "100.png";
}
}
function checkStatus() {
var statusNames = ["UNCACHED", "IDLE", "CHECKING", "DOWNLOADING",
"UPDATEREADY", "OBSOLETE"];
var status = window.applicationCache.status;
document.getElementById("status").innerHTML = statusNames[status];
}
</script>
</body>
</html>