h5的離線緩存機制

時間 2019-11-29

標籤 h5 離線緩存機制简体版

原文原文鏈接

什麼是Manifest：html

其實Manifest是一個簡單的文本文件，它的擴展名是任意的，定義須要緩存的文件、資源，當第一次打開時，瀏覽器會自動緩存相應的資源。瀏覽器

Manifest 的特色：緩存

離線瀏覽：即當網絡斷開時，能夠繼續訪問你的頁面。
訪問速度快：將文件緩存到本地，不需每次都從網絡上請求。
穩定性：作了Manifest緩存，遇到突發網絡故障或者服務器故障，繼續訪問本地緩存。

Manifest的使用：服務器

html新增了一個manifest屬性，能夠用來指定當前頁面的manifest文件。網絡

建立一個和html同名的manifest文件，好比頁面爲index.html，那麼能夠建一個index.manifest的文件，而後給index.html的html標籤添加以下屬性便可：app

<html lang="en" manifest="index.manifest"> 或<html manifest="http://www.example.com/index.manifest">this

一、manifest 的引入可使絕對路徑也能夠是相對路徑，若是你使用的是絕對路徑，你的manifest文件必須和你的站點掛在同一個域名下。spa

二、manifest文件你能夠保存爲任意的擴展名，但mine-type 必須是 text/cache-manifest。code

<html lang="en" manifest="index.manifest"> 或 <html lang="en" manifest="index.cache"> 在服務器上部署時須要在服務器上添加相應的mie-typehtm

三、manifest 標籤應該包含到你須要緩存資源的頁面，當第一次打開該頁面時，瀏覽器會解析該頁面中的mainfest，並緩存裏面列舉的資源，同時該頁面也會自動會被瀏覽器緩存，即便該頁面沒有在Manifest中列出。

Manifest文件結構：

接下來詳細說說manifest的細節，一個典型的manifest文件代碼結構像下面這樣：

CACHE MANIFEST（必在第一行，必須寫）

# version 2016-01-01 10:10

CHCHE:（必須寫）

#緩存文件

NETWORK:

#不緩存文件

FALLBACK:

#頁面沒法訪問時的回退頁

方法：

update():檢測更新manifest文件

updateready事件：當有新的緩存，並更新完以後，會觸發此事件

swapCache(): 用來執行本地緩存的更新操做觸發updateready事件時調用

window.applicationCache.update();
       window.applicationCache.addEventListener("updateready", function(e) {
               window.applicationCache.swapCache();
               if (confirm("A new version of this site is available. Load it?")) {
                   window.location.reload();
               }

}, false);

progress事件：當有新的緩存，並處於正在下載的過程當中時會不斷出發此事件

window.applicationCache.addEventListener("progress",function(){
alert(window.applicationCache.status); //0未緩存 1空閒 2檢查中 3下載中 4更新就緒 5緩存過時

})；

checking事件：正在檢查

noupdate事件：檢查更新結束，沒有須要更新。

downloading事件：正在下載

cached事件：空閒，緩存爲最新狀態

error事件：報錯