html5 web應用程式快取
阿新 • • 發佈：2019-02-02
話說到web應用程式快取，這個東西，我覺得挺有用的。以前，個人看到網頁版的美圖秀秀，而自己的電腦本地也安裝了美圖秀秀，就覺得這兩者沒必要在網頁版上也實現吧。不過，後來覺得，還是網頁版的方便多了，因為不需要自己安裝程式啊，至少自己的電腦裡面不會因多一個應用程式，而很亂。但是，又苦惱於web版的美圖秀秀，不管是在沒有網路的日子呢，還是在像烏龜般慢吞吞的校園中，都不能使用，又覺得還是本地電腦上的應用方便。於是乎，一直在猜想著，能不能有基於web的應用程式，既需要安裝應用程式，又不依賴於網路的，那該有多好啊~
這不，最近看到一個概念，web離線應用，真是完美詮釋了我想要說的了，很有興趣的，就可是了這個話題的旅行了。
<!doctype html>
<html manifest="demo.appcache">
<!--<html manifest="/.../demo_html.appcache">使用這個，載入應用程式的web快取.使用manifest這個屬性的頁面，會在使用者對其進行訪問的時候，都會自動快取為.appcache檔案。其中，有一點非常重要的是，manifest檔案需要正確配置MIME-type，即“text/cahe-manifest”，必須在web伺服器上進行配置才行。
完整的manifest檔案例子：
CACHE MANIFEST
#2012-02-21 v1.0.0(這個註釋行)
/theme.css
/logo.gif
/main.js
NETWORK
login.asp
FALLBACK
/html5/404.html
manifest檔案分為三部分：
CACHE MANIFEST——在此標題下列出的檔案將在首次下載後進行快取(包含/theme.css,/logo.gif,/main.js，這就是為什麼，在下面那個頁面一個簡單的js程式碼也要使用js載入，這樣是為了達到在快取中的下載與載入使用。當manifest檔案載入之後，瀏覽器就會從網站的根目錄下載這三個檔案，所以，無論使用者何時與因特網斷開連線，這些資源依然是可用的)
NETWORK——在此標題下列出的檔案需要與伺服器的連結，且不會被快取(login.asp，在此目錄下標識的，則表明該檔案永遠都不會被快取，同時離線時事不可用的。也可以使用*來表示，其他的所有資源都需要網路連線)
FALLBACK——在此標題下列出的檔案規定當頁面無法訪問時的回退頁面(這個目錄，表示如果無法建立因特網連線的話，則用404.html替代目錄下的所有檔案，這個就是我們經常所見的一個錯誤網頁)
-->
<head>
<meta charset="utf-8">
<title>HTML5應用程式快取</title>
</head>
<!--HTML5，可以建立cache manifest檔案，來建立一個web應用的離線版本(web應用的理離線版本，通俗的來說，就是一個應用程式在基於瀏覽器的同時，不需要安裝客戶端程式的同時，也不依賴於網路，就可以通過瀏覽器開啟一個應用。舉例子說明，比如office程式吧，我們在自己電腦上安裝了office的桌面版本，安裝也比較麻煩的。同時，我們也發現，網路上有office的線上版本的，可以線上同樣適用office工具。但是，我們發現，這樣的線上office工具是需要聯網才能獲取到服務的，而web應用程式的離線化，其實就是，同時免去了安裝本地office的同時，又不需要聯網，就可以基於瀏覽器開啟一個web應用。這就不可避免的，需要通過瀏覽器，在我們本地電腦上存放一些web應用的快取了，然後就可以在沒有英特網的時候進行訪問。)
web應用程式快取的優勢：所有瀏覽器均支援應用程式快取，除了IE
1.離線瀏覽——使用者可在應用離線時使用它們
2.速度——已快取資源載入得更快
3.減少伺服器負載——瀏覽器將只從伺服器下載更新/更改過得資源。-->
<body>
<script type="text/javascript">
function getDateTime()//該函式照例子來說，是放在demo_time.js檔案裡，然後再<script>那裡進行src載入的
{
var d=new Date();
document.getElementByIdx_x("timePara").innerHTML=d;
}
</script>
<!--關於快取的生命週期：
web應用一旦被快取，就會一直存在，除非：
1.使用者清空瀏覽器快取
2.manifest檔案被修改
3.由程式來更新應用快取-->
<p id="timePara"><button onClick="getDateTime()">獲取日期和事件</button></p>
<p>請開啟<a href="html5_html5_manifest.html" target="_blank">這個頁面</a>，然後離線瀏覽頁面，頁面中的指令碼和影象依然可用</p>
<!--在這裡，應該是載入了<html manifest="..appcache">這裡的快取檔案，才得以執行的，由於本人不會構造什麼.appcache檔案，也沒有這樣的檔案，所以做不了測試-->
</body>
</html>