HTML5離線緩存（Application Cache）

時間 2019-11-26

標籤 html5 html 離線緩存 application cache 欄目 HTML5 简体版

原文原文鏈接

HTML5離線緩存又名Application Cache，是從瀏覽器的緩存中分出來的一塊緩存區，要想在這個緩存中保存數據，可使用一個描述文件（manifest file），列出要下載和緩存的資源。javascript

Manifest 文件css

manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內容（以及不緩存的內容）。html

manifest 文件可分爲三個部分：java

CACHE MANIFEST - 在此標題下列出的文件將在首次下載後進行緩存web

NETWORK - 在此標題下列出的文件須要與服務器的鏈接，且不會被緩存瀏覽器

FALLBACK - 在此標題下列出的文件規定當頁面沒法訪問時的回退頁面（好比 404 頁面）緩存

相關JavaScript API服務器

核心是applicationCache對象，有個status屬性，表示應用緩存的當前狀態：app

0（UNCACHED） : 無緩存，即沒有與頁面相關的應用緩存spa

1（IDLE） : 閒置，即應用緩存未獲得更新

2 （CHECKING） : 檢查中，即正在下載描述文件並檢查更新

3 （DOWNLOADING） : 下載中，即應用緩存正在下載描述文件中指定的資源

4 （UPDATEREADY） : 更新完成，全部資源都已下載完畢

5 （IDLE） : 廢棄，即應用緩存的描述文件已經不存在了，所以頁面沒法再訪問應用緩存

相關的事件

表示應用緩存狀態的改變：

checking : 在瀏覽器爲應用緩存查找更新時觸發

error : 在檢查更新或下載資源期間發送錯誤時觸發

noupdate : 在檢查描述文件發現文件無變化時觸發

downloading : 在開始下載應用緩存資源時觸發

progress：在文件下載應用緩存的過程當中持續不斷地下載地觸發

updateready : 在頁面新的應用緩存下載完畢觸發

cached : 在應用緩存完整可用時觸發

瀏覽器支持

IE10+、Firefox3+、Safari4+、Opera10.六、Chrome、iOS3.2+、Android Webkit

注意事項

1. manifest文件須要配置正確的MIME-type，即 "text/cache-manifest"，必須在web服務器上進行配置。

例如Tomcat，須要修改web.xml文件，添加以下：

<mime-mapping>
     <extension>manifest</extension>
     <mime-type>text/cache-manifest</mime-type>
</mime-mapping>

2. 更新完版本後，必須刷新一次纔會啓動新版本（會出現重刷一次頁面的狀況）。

因此頁面須要加上這js，監聽到版本更新後，刷新頁面：

applicationCache.addEventListener('updateready', function(e) {

    if (applicationCache.status == applicationCache.UPDATEREADY) {
       
        applicationCache.swapCache(); //使用新版本資源
        window.location.reload(); //刷新頁面
    }
}, false);

3. 瀏覽器對緩存數據的容量限制可能不太同樣（某些瀏覽器設置的限制是每一個站點 5MB）。

4. 瀏覽器會自動緩存引用manifest文件的HTML文件，這就致使若是改了HTML內容，也須要更新版本才能作到更新。

5. 當一個資源被緩存後，該瀏覽器直接請求這個絕對路徑也會訪問緩存中的資源，其餘頁面即便沒有設置manifest屬性，請求的資源若是在緩存中也從緩存中訪問。

6. 若是manifest文件，或者內部列舉的某一個文件不能正常下載，整個更新過程將視爲失敗，瀏覽器繼續所有使用老的緩存。

離線緩存優勢

1. 減小服務器負載，提升資源加載速度

2. 離線瀏覽，用戶可在應用離線時使用

離線緩存缺點

1. 更新完版本後，必須刷新一次纔會啓動新版本（會出現重刷一次頁面的狀況）

2. 進入離線存儲的頁面，若是不更新版本，是會將其當成靜態頁面不請求。

3. 沒法進行灰度發佈等策略。

PS：灰度發佈，一部分使用舊版，一部分人用新版。

4. 沒法增量更新。

PS：少許代碼修改，全量更新。

離線緩存與傳統瀏覽器緩存區別

1. 離線緩存是針對整個應用，瀏覽器緩存是單個文件

2. 離線緩存斷網了仍是能夠打開頁面，瀏覽器緩存不行

3. 離線緩存能夠主動通知瀏覽器更新資源

離線緩存示例

manifest

CACHE MANIFEST
#v1.0.1

CACHE:
js/app.js
css/app.css

NETWORK:
*

FALLBACK:
404.html

demo.html

<!DOCTYPE html>
<html manifest="app.manifest">
<head>
<title>Demo</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/app.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
</head>
<script>
    applicationCache.addEventListener('updateready', function(e) {
        if (applicationCache.status == applicationCache.UPDATEREADY) {
 
            applicationCache.swapCache(); //使用新版本資源
            window.location.reload(); //刷新頁面
        }
    }, false);
</script>
<body>
俯首江左有梅郎~
</body>
</html>