H5離線緩存機制-manifest

時間 2019-11-11

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

原文原文鏈接

簡介：Manifest 其實就是web應用的一種緩存機制，主要用於如今webapp應用中，它是瀏覽器本身的一種機制，隨着移動互聯網時代的到來，網絡可靠性下降，若是咱們已經將須要的文件緩存下下來，一旦網絡沒法訪問，也能繼續訪問。javascript

並且作好相應資源的緩存能夠帶來更好的用戶體驗，當用戶使用本身的流量上網時，本地緩存不只能夠提升用戶訪問速度，並且大大節約用戶的使用流量。html

先來看下咱們公司實際項目中的使用狀況。（阿里淘點點也使用了manifest）html5

第一次加載時：總體請求是392KB耗時1.82sjava

當本地作了manifest緩存後：大小變成了2.6KB，請求時間縮短爲757ms，這大大提升了用戶的體驗和節約了用戶的流量。web

可是Manifest不是W3C標準的機制，使用過程當中會或多或少碰見一些坑，但整體仍是利大於弊，咱們公司項目和淘點點都使用了Manifest。下面的截圖顯示各瀏覽器對Manifest的支持狀況。chrome

什麼是Manifest：瀏覽器

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

Manifest 的特色：服務器

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

Manifest的使用：網絡

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

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

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

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

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

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

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

注意： "/page-url/", "/page-url/?something", "/page-url/?something-else" Manifest 會當成不一樣的頁面，若是page-url 頁面中包含了 Manifest 屬性則瀏覽器會將該頁面中列舉出來的資源分別保存，因此Manifest最好使用在SPA（單頁應用）項目中。

在Chrome中，可使用

chrome://appcache-internals/ 查看你緩存在本地的資源文件。

Manifest文件結構：

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

manifest文件，基本格式爲三段： CACHE， NETWORK，與 FALLBACK，其中NETWORK和FALLBACK爲可選項。

而第一行CACHE MANIFEST爲固定格式，必須寫在前面。

以#號開頭的是註釋，能夠是版本號，時間戳等等。通常會在這寫個版本號，用來在緩存的文件更新時，更改manifest的做用：瀏覽器已經緩存下來的緩存，只有當manifest文件發生了改變纔會更新本地緩存，即便你的代碼發生了

更新，本地瀏覽器也是不知道的，因此每次發佈代碼時你能夠更改下#後面的信息好比版本號或者時間，告訴瀏覽器相應的更新本地緩存。

一、第一行是CACHE MANIFEST 這是必須須要的。

二、CACHE（必須）標識出哪些文件須要緩存，能夠是相對路徑也能夠是絕對路徑。這裏列舉出來的文件，當第一次加載下來時，會被瀏覽器緩存在本地。

三、NETWORk 這一部分是要繞過緩存直接讀取的文件，可使用通配符 *，大多數網站使用 * 。當使用* 時表示出 CACHE指定文件外，其它全部頁面都須要聯網訪問。

四、FALLBACK （可選）當資源沒法訪問時，瀏覽器使用後備資源去替代。第二個表示後備頁面。兩個 URI 都必須使用相對路徑而且與清單文件同源。可使用通配符。

下面的例子中，若是沒法創建因特網鏈接，則用「404.html」替代 /html5/ 目錄中的全部文件。

FALLBACK:
/html5/ /404.html

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

FALLBACK:
*.html /404.html


注意： 1 必須在第一行 二、三、4 直接的順序是隨意的，而且在同一個manifest文件中能夠出現屢次，屢次和一次效果同樣。
　　　 添加 manifest　 屬性的頁面會自動被瀏覽器緩存，不須要再CACHE節點中再次添加。

如何更新緩存

以下三種方式，能夠更新緩存：

更新manifest文件
經過javascript操做
清除瀏覽器緩存

給manifest添加或刪除文件，均可更新緩存，若是咱們更改了js，而沒有新增或刪除，前面例子中註釋中的版本號，能夠很好的用來更新manifest文件。

html5中引入了js操做離線緩存的方法，下面的js能夠手動更新本地緩存。

window.applicationCache.update();

若是用戶清除了瀏覽器緩存（手動或用其餘一些工具）都會從新下載文件。

咱們可使用代碼手動更新manifest緩存，一旦webapp源碼更新，會自動更新本地manifest緩存，使用戶始終訪問到最新的源碼。

 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();
      }
    } else {
      // Manifest didn't changed. Nothing new to server.
    }
  }, false);

參考資料：一、http://www.html5rocks.com/en/tutorials/appcache/beginner/二、http://yanhaijing.com/html/2014/12/28/html5-manifest/本文主要用於本身學習筆記，若有錯誤之處，還望不吝指正，謝謝。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。