2015年12月15日 星期二

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;
}

沒有留言:

張貼留言