離線應用程式快取功能允許我們指定網路應用程式所需的全部資源,
這樣瀏覽器就能在載入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>
最後建立需要啟用離線快取的html檔案
<!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"/> <p> <button id="banana">Banana</button> <button id="apple">Apple</button> <button id="cherries">Cherries</button> </p> <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()——更新快取以確保清單中的項目都已下載了最新的版本;
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;}
p {margin-top: 10px; margin-bottom: 10px}
table {margin: 10px; border-collapse: collapse;}
th, td {padding: 2px;}
body > * {float: left;}
</style>
</head>
<body>
<p>
<img id="imgtarget" src="banana100.png"/>
<p>
<button id="banana">Banana</button>
<button id="apple">Apple</button>
<button id="cherries">Cherries</button>
</p>
<p>
<button id="update">Update</button>
<button id="swap">Swap Cache</button>
</p>
The status is: <span id="status"></span>
</p>
<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>
以上是html5之創建離線Web應用程式的範例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!