HTML Application Cache 離線應用

時允發表於2019-02-16
HTMLAPP

HTML Application Cache （簡稱 HAC）是一套針對快取應用資源的介面，通過此套介面，可以實現網頁的離線訪問，或者在網速較慢的情況下也能快速開啟頁面。
使用 HAC 之後，瀏覽器在請求網站的時候首先會去 cache 內查詢，如果命中，則會載入命中的資源，如果沒有，則向服務端請求，再載入。

HAC 與瀏覽器傳統的快取（304 的那種）不同的是，HAC 是將整套資源作為一個集合快取下來，快取的鍵是入口頁面的 url，而不是針對單個檔案快取。
一個 HAC 網站所需要的資源是通過快取清單( manifest) 來告知瀏覽器的，在清單裡宣告的資源將會被瀏覽器加入頁面的 HAC 。
manifest 的宣告方法如下:

頁面入口 index.html

<!doctype html>
<html manifest="/app.manifest">
    <header>
    <script src="/app.js"></script>
    </header>
</html>

/app.manifest 檔案

CACHE MANIFEST
/index.html
/app.js

之後瀏覽器就會將 index.html 和 app.js 作為一整套資源加入到 HAC。

在瀏覽器第二次開啟頁面的時候，就會在 HAC 中找到快取，並載入。
但同時瀏覽器還會嘗試去請求 /app.manifest 檔案，如果請求成功，就會拿新舊兩個版本的 manifest 去對比，如果發現檔案內容有更改，則會按照新版 manifest 中列出的檔案重新請求一遍資源，並更新到 HAC 裡。如果這時有一個檔案訪問出錯，就會導致 HAC 停止更新。但是預設 chrome 會限制 5MB 的快取大小，如果是 chrome 應用，並想要更多快取空間的話，則需要宣告 unlimitedStorage。
在瀏覽器內也可以手動的執行 applicationCache.update() 去觸發檢查。然後通過 applicationCache.status 去判斷是否需要更新 HAC。
applicationCache.status 的狀態為以下幾種 :

appCache.UNCACHED = 0; // 網頁未快取
appCache.IDLE = 1; // 閒置
appCache.CHECKING = 2; // 檢查中
appCache.DOWNLOADING = 3; // 下載中
appCache.UPDATEREADY = 4; // 更新已準備完畢
appCache.OBSOLETE = 5; // 更新失敗
// js 內主動更新的流程
var appCache = window.applicationCache;
 
window.applicationCache.addEventListener(`updateready`, function(e) {
    if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
        window.applicationCache.swapCache();
        if (confirm(`A new version of this site is available. Load it?`)) {
                window.location.reload();
        }
    }
});
  
appCache.update(); // Attempt to update the user`s cache.

相關文章