HTML5 -有趣的 offline 功能 manifest 介紹
一、在網頁所在資料夾下新增一檔名為.htaccess的檔案，內容如下：
AddType text/cache-manifest .manifest
二、在網頁所在資料夾下新增一檔名為offline.manifest的檔案，內容如下：
CACHE MANIFEST
#This is a comment
CACHE:
index.html
demo_time.js
img_logo.gif
PS.紅色部分為要在離線時使用的檔案列表......
三、在一定會存取的HTML檔案中（例如：index.html）修改內容如下：
將：
<html>
改成：
<html manifest="offline.manifest">
如此一來就大功告成了
四、測試
本人是使用 xampp 環境，先開啟網頁讓瀏覽器紀錄暫存，然後將 apache 關閉，神奇的事情發生了，網頁依然能開啟暫存的網頁，假如此時修改網頁的文字，reload 一下是否你也會發現，網頁依然紀錄先前的內容呢?
完整程式碼如下
index.html
<!DOCTYPE html>
<html manifest="offline.manifest">
<head>
<meta charset="utf8">
</head>
<body>
<script src="demo_time.js"></script>
<p id="timePara"><button onclick="getDateTime()">Get Date and Time</button></p>
<p><img src="img_logo.gif" width="336" height="69"></p>
<p>離線測試</p>
</body>
</html>
offline.manifest
CACHE MANIFEST
#This is a comment
CACHE:
index.html
demo_time.js
img_logo.gif
.htaccess
AddType text/cache-manifest .manifest
demo.time.js
function getDateTime()
{
var d=new Date();
document.getElementById('timePara').innerHTML=d;
}
AddType text/cache-manifest .manifest
二、在網頁所在資料夾下新增一檔名為offline.manifest的檔案，內容如下：
CACHE MANIFEST
#This is a comment
CACHE:
index.html
demo_time.js
img_logo.gif
PS.紅色部分為要在離線時使用的檔案列表......
三、在一定會存取的HTML檔案中（例如：index.html）修改內容如下：
將：
<html>
改成：
<html manifest="offline.manifest">
如此一來就大功告成了
四、測試
本人是使用 xampp 環境，先開啟網頁讓瀏覽器紀錄暫存，然後將 apache 關閉，神奇的事情發生了，網頁依然能開啟暫存的網頁，假如此時修改網頁的文字，reload 一下是否你也會發現，網頁依然紀錄先前的內容呢?
完整程式碼如下
index.html
<!DOCTYPE html>
<html manifest="offline.manifest">
<head>
<meta charset="utf8">
</head>
<body>
<script src="demo_time.js"></script>
<p id="timePara"><button onclick="getDateTime()">Get Date and Time</button></p>
<p><img src="img_logo.gif" width="336" height="69"></p>
<p>離線測試</p>
</body>
</html>
offline.manifest
CACHE MANIFEST
#This is a comment
CACHE:
index.html
demo_time.js
img_logo.gif
.htaccess
AddType text/cache-manifest .manifest
demo.time.js
function getDateTime()
{
var d=new Date();
document.getElementById('timePara').innerHTML=d;
}
留言
張貼留言