HTML5中快取技術

laowan發表於2015-05-08
HTML快取

      通過指定HTML檔案的快取檔案列表，就可以使客戶端快取列表中的檔案到本地，這一特性可以減少不必要的通訊訪問，甚至可以開發離線使用的web應用程式。下面是一個簡單的例子。在HTML中指定快取列表檔案字尾為appcache，但其實並沒有規定特定的擴充名，但為了清楚檔案的用途，推薦使用.appcache

cache.html

<!DOCTYPE html>
<html manifest="sample.appcache">
<head>
    <meta charset="UTF-8">
    <title>test cache</title>
    <link rel="stylesheet" href="cache.css">
</head>
<body>
    <h1>Cache Sample</h1>
    <img src="t.png" alt="">
    <script src="cache.js"></script>
</body>
</html>

下面是快取檔案中的配置

sample.appcache

CACHE MANIFEST
# revision 1

CACHE:
./cache.js
./cache.css
./t.png

第一行必須是CACHE MANIFEST，以#開始的行為註釋 ，從CACHE:  開始其後內容為自動快取的內容

其他的配置項：    

     NETWORK： 後面內容為不快取的內容   

     FALLBACK:   後面的內容為某一資源無法訪問時的替代資源 

    如 FALLBACK:

         contents/             notfound.html                  #指定contents/下的資源無法訪問的替代資源為  notfound.html

快取的更新：

     實驗使用Apache，在伺服器端更新了.css檔案的內容後，客戶端瀏覽器並沒有變化，因為客戶端決定是否更新快取是根據快取列表檔案是否有變化來更新的，快取列表沒有變化，即使檔案內容發生變化，仍然不會重新快取，在此時，可以通過對註釋部分的版本號進行改變，來使得客戶端重新更新。

    當客戶端訪問時，先根據快取檔案顯示頁面，然後重新更新快取檔案，所以需要在下一次重新訪問頁面時，頁面內容才會發生變化，要精確控制快取更新的時機，需要使用後面的Application API。

    

   applicationCache.onupdateready = function(){
        var ok = confirm(`有新版本，是否更新?`);
        if(ok)   location.reload();
    }


相關文章