h5 離線快取機制 manifest

2022-08-25 00:24:11 字數 2152 閱讀 1026

**:

其實manifest是乙個簡單的 文字檔案,它的副檔名是任意的,定義需要快取的檔案、資源,當第一次開啟時,瀏覽器會自動快取相應的資源。

html新增了乙個manifest屬性,可以用來指定當前頁面的manifest檔案。

建立乙個和html同名的manifest檔案,比如頁面為index.html,那麼可以建乙個index.manifest的檔案,然後給index.html的html標籤新增如下屬性即可:

manifest="">

1、manifest 的引入可以使絕對路徑也可以是相對路徑,如果你使用的是絕對路徑,你的manifest檔案必須和你的站點掛在同乙個網域名稱下。

2、manifest檔案你可以儲存為任意的副檔名,但mine-type 必須是 text/cache-manifest。

或  在伺服器上部署時需要在伺服器上新增相應的mie-type

3、manifest 標籤應該包含到你需要快取資源的頁面,當第一次開啟該頁面時,瀏覽器會解析該頁面中的mainfest,並快取裡面列舉的資源,同時該頁面也會自動會被瀏覽器快取,即使該頁面沒有在manifest中列出。

注意: "/page-url/", "/page-url/?something", "/page-url/?something-else"  manifest 會當成不同的頁面,如果page-url 頁面中包含了 manifest 屬性則瀏覽器會將該頁面中列舉出來的資源分別儲存,所以manifest最好使用在spa(單頁應用)專案中。

在chrome中,可以使用

接下來詳細說說manifest的細節,乙個典型的manifest檔案**結構像下面這樣:

manifest檔案,基本格式為三段: cache, network,與 fallback,其中network和fallback為可選項。

而第一行cache manifest為固定格式,必須寫在前面。

以#號開頭的是注釋,可以是版本號,時間戳等等。一般會在這寫個版本號,用來在快取的檔案更新時,更改manifest的作用:瀏覽器已經快取下來的快取,只有當manifest檔案發生了改變才會更新本地快取,即使你的**發生了

更新,本地瀏覽器也是不知道的,所以每次發布**時你可以更改下#後面的資訊比如版本號或者時間,告訴瀏覽器相應的更新本地快取。

1、第一行是cache manifest 這是必須需要的。

2、cache(必須) 標識出哪些檔案需要快取,可以是相對路徑也可以是絕對路徑。這裡列舉出來的檔案,當第一次載入下來時,會被瀏覽器快取在本地。

3、network  這一部分是要繞過快取直接讀取的檔案,可以使用萬用字元 *,大多數**使用 * 。 當使用* 時 表示出 cache指定檔案外,其它所有頁面都需要聯網訪問。

4、fallback  (可選) 當資源無法訪問時,瀏覽器使用後備資源去替代。第二個表示後備頁面。兩個 uri 都必須使用相對路徑並且與清單檔案同源。可以使用萬用字元。

下面的例子中,如果無法建立網際網路連線,則用 「404.html」 替代 /html5/ 目錄中的所有檔案。

fallback:

/html5/ /404.html

下面的例子中,當任何頁面無法訪問時跳轉到 「404.html」頁。

fallback:

*.html /404.html

注意: 1 必須在第一行 2、3、4 直接的順序是隨意的,並且在同乙個manifest檔案中可以出現多次,多次和一次效果一樣。

新增 manifest  屬性的頁面會自動被瀏覽器快取,不需要再cache節點中再次新增。

如下三種方式,可以更新快取:

給manifest新增或刪除檔案,都可更新快取,如果我們更改了js,而沒有新增或刪除,前面例子中注釋中的版本號,可以很好的用來更新manifest檔案。

html5中引入了js操作離線快取的方法,下面的js可以手動更新本地快取。

(e)

} else

}, false);

H5離線快取機制 Manifest

manifest是乙個簡單的文字檔案,它的副檔名是任意的,定義需要快取的檔案 資源,當第一次開啟時瀏覽器會自動快取相應的資源。manifest的特點 manifest的使用 html新增了乙個manifest屬性,用於指定當前頁面的manifest檔案,引入得路徑可以是相對路徑也可以是絕對路徑,如果...

H5離線快取

什麼是離線快取 離線快取可以將站點的一些檔案快取到本地,它是瀏覽器自己的一種機制,將需要的檔案快取下來,以便後期即使沒鏈結網路,被快取的頁面也可以展示 離線快取的優勢 提高使用者的訪問速度,節省流量 如何實現離線快取 內容為 cache manifest 1.0 版本號 這個注釋是給 開發者看的,代...

H5使用Manifest離線快取

1.mime type宣告 以apache為例,我們需要在httpd.conf中加上 2.在html檔案中引入manifest檔案 3.manifest檔案語法 cache manifest version 1.0 cache style default.css images sound icon....