清单 1.
Clock 应用代码
<!-- clock.html -->
<!DOCTYPE HTML>
<html>
<head>
<title>Clock</title>
<script src="clock.js"></script>
<link rel="stylesheet" href="clock.css">
</head>
<body>
<p>The time is: <output id="clock"></output></p>
</body>
</html>
/* clock.css */
output { font: 2em sans-serif; }
/* clock.js */
setTimeout(function () {
document.getElementById(‘clock‘).value = new Date();
}, 1000);
|
当用户在离线状态下访问“clock.html”时，页面将无法展现。为了支持离线访问，开发者必须添加 cache manifest
文件，指明需要缓存的资源。这个例子中的 cache manifest 文件为“clock.manifest”，它声明了 3
个需要缓存的资源文件“clock.html”、“clock.css”和“clock.js”。
清单 2.
clock.manifest 代码
CACHE MANIFEST clock.html clock.css clock.js |
添加了 cache manifest 文件后，还需要修改“clock.html”，把 <html> 标签的 manifest
属性设置为“clock.manifest”。修改后的“clock.html”代码如下。
清单 3. 设置
manifest 后的 clock.html 代码
<!-- clock.html --> <!DOCTYPE HTML> <html manifest="clock.manifest"> <head> <title>Clock</title> <script src="clock.js"></script> <link rel="stylesheet" href="clock.css"> </head> <body> <p>The time is: <output id="clock"></output></p> </body> </html> |
修改后，当用户在线访问“clock.html”时，浏览器会缓存“clock.html”、“clock.css”和“clock.js”文件；而当用户离线访问时，这个
Web 应用也可以正常使用了。
cache manifest 格式
时间： 2024-10-14 19:28:50