使用HTML5开发离线应用 - cache manifest(2) - 樱花落在指尖上

清单 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 格式

posted on 2015-12-20 16:54 樱花落在指尖上阅读(228) 评论(0) 收藏举报

刷新页面返回顶部