html5之创建离线Web应用程序的示例代码
离线应用程序缓存功能允许我们指定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>最后创建需要启用离线缓存的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()——更新缓存以确保清单里的项目都已下载了最新的版本；
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;}
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>Atas ialah kandungan terperinci html5之创建离线Web应用程序的示例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1386
52
Sempadan Jadual dalam HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.
HTML jidar-kiri
Sep 04, 2024 pm 04:48 PM
Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.
Jadual Bersarang dalam HTML
Sep 04, 2024 pm 04:49 PM
Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.
Susun Atur Jadual HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.
Pemegang Tempat Input HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.
Senarai Tertib HTML
Sep 04, 2024 pm 04:43 PM
Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing
Memindahkan Teks dalam HTML
Sep 04, 2024 pm 04:45 PM
Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.
Butang onclick HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.
