1.1. 起源1

2. 離線存儲2

3. AppCache2

3.1. Appcache事件點如圖2

3.2. Manifest文件4

3.3. 自動化工具4

3.3.1. CACHE:（必須）5

3.4. 頁面都離線了，ajax 更新5

3.5. 頁面的參數如何攜帶使用js解析6

3.6. 離線頁面的更新 長尾問題6

3.7. 如何更新緩存7

3.8. 注意事項8

1.1. 起源

html5之前的網頁，都是無連接，必須聯網才能訪問，這其實也是web的特色，這其實對于PC是時代問題并不大，但到了移動互聯網時代，設備終端位置不再固定，依賴無線信號，網絡的可靠性變得降低，比如坐在火車上，過了一個隧道（15分鐘），便無法訪問網站，這對于web的傷害是很大的，比如對于 《ecmascript合集》這樣的為閱讀而生的頁面。

html5便引入了cache manifest 文件。那么什么是cache manifest呢，接下來會講到。

2. 離線存儲

工作中實際使用的離線緩存有localstorage與Application cache，這兩個皆是好東西，一個常用于ajax請求緩存，一個常用于靜態資源緩存，這里簡單說下我的一些理解

離線存儲技術

HTML5提出了兩大離線存儲技術：localstorage與Application Cache，兩者各有應用場景；傳統還有離線存儲技術為Cookie。

經過實踐我們認為localstorage應該存儲一些非關鍵性ajax數據，做錦上添花的事情；

Application Cache用于存儲靜態資源，仍然是干錦上添花的事情；

作者:: ★(attilax)>>> 綽號:老哇的爪子 （ 全名：：Attilax Akbar Al Rapanui 阿提拉克斯 阿克巴 阿爾 拉帕努伊 ） 漢字名：艾龍， EMAIL:1466519819@qq.com

轉載請注明來源： http://www.cnblogs.com/attilax/

3. AppCache

注意： 主頁一定會被緩存起來的，因為AppCache主要是用來做離線應用的，如果主頁不緩存就無法離線插件了，因此把index.html添加到NETWORK中是不起效果的。

AppCache文件里面兒

不必明確列出AppCache鏈接到的頁面,因為在默認情況下,任何包含html元素manifest屬性的頁面都會緩存,這些自動緩存的頁面稱為主條目,而清單中列出的文件稱為詳細條目,如果某些文件需要在線訪問,,則可以創建一種文件白名單,如果將它們列于NETWORK;之后,這些文件就總可以通過網絡加載,這些文件稱為網絡條目.

使用Application cache可以提升網站載入速度，主要體現在請求傳輸上，把一些http請求轉為本地讀取，有效地降低網絡延遲，降低http請求，使用簡單，還節約流量何樂而不為

另外要做好對manifest文件的管理，由于清單內文件不可訪問或manifest更新不及時造成的一些問題。

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

3.1. Appcache事件點如圖

3.2. Manifest文件

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

CACHE MANIFEST#version 1.3CACHE: test.cssNETWORK:*

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

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

以#號開頭的是注釋，一般會在第二行寫個版本號，用來在緩存的文件更新時，更改manifest的作用，可以是版本號，時間戳或者md5碼等等。

關于manifest.

首先 manifest 的 contentType = text/cache-manifest

然后,其擴展名，建議為 "appcache"

3.3. 自動化工具

manifest文件中的cache部分不能使用通配符，必須手動指定，這實在太讓人不可理解，文件一多，就成了體力活了

3.3.1. CACHE:（必須）

標識出哪些文件需要緩存，可以是相對路徑也可以是絕對路徑。

a.csshttp://yanhaijing.com/a.css

NETWORK:（可選）

這一部分是要繞過緩存直接讀取的文件，可以使用通配符＊。

下面的代碼 “login.asp” 永遠不會被緩存，且離線時是不可用的：

NETWORK:login.asp

FALLBACK:（可選）

指定了一個后備頁面，當資源無法訪問時，瀏覽器會使用該頁面。該段落的每條記錄都列出兩個 URI—第一個表示資源，第二個表示后備頁面。兩個 URI 都必須使用相對路徑并且與清單文件同源?？梢允褂猛ㄅ浞?。

下面的例子中，如果無法建立因特網連接，則用 “404.html” 替代 /html5/ 目錄中的所有文件。

FALLBACK:/html5/ /404.html

下面的例子中，則用 “404.html” 替代所有文件。

FALLBACK:*.html /404.html

3.4. 頁面都離線了，ajax 更新

A. 首先，你可以修改下 manifest 文件來更新這個頁面，這個我就不介紹了，但是作為文章內容 頁面離線以后，就會存儲在本地了，如果你是一篇文章的話，那么這個文章的內容頁就被存下來了，你如果以相同的 url 去訪問，不管你文章里面的數據更新沒有，這個離線下來的頁面都不會更新了 ( 除非你更新manifest 文件 ) 。所以，所有的動態數據，你都得用 ajax 方式去獲取，就像客戶端一樣，離線的頁面應該是一個沒有數據的 空殼，然后通過 ajax 去拉去數據填補這個空殼。然后要注意的是， ajax 的請求地址，要寫到 manifest 的 network 中，要不然，你可以試試。

3.5. 頁面的參數如何攜帶使用js解析

比如 m.baidu.com/app?a=1&b=2 ，通常我們用一些參數來標記這個頁面，通過參數來渲染頁面內容，但是 manifest 對于上面的方式，會認為不同的參數表示不同的頁面。如果你吧內容頁做成一

3.6. 離線頁面的更新 長尾問題

網站更新了，如果更新用戶本地的離線頁面呢？與很多文章中說的一樣，先上線你的文件，然后修改一下頁面中引入的cache.manifest文件即可，比如修改下注釋，修改后，如果再訪問頁面，就會先去校驗manifest 時候有更新，如有更新，再次刷新頁面的時候，頁面就會更新了。

A.長尾問題， 就像前面說到的一樣，如果你的 manifest 文件更新了，你訪問頁面，需要刷新一次，更新的頁面才能 load 進來，那么這樣就有一個問題，如果你的后端數據，就是給 js ajax 接口的數據變化了，你對應的 js 也修改了。那么你修改 manifest 上線的時候，第一次開頁面，頁面就會 bug 了。再刷一次頁面，就好了。那么，這個第一次訪問的 bug ，是我們不想看到的。而且你不能知道用戶什么時候第二次再來訪問你的頁面，所以你的頁面一旦使用 manifest 離線，就像客戶端一樣，這樣就出現了長尾問題。還好， manifest 有一些 js 接口，可以來判斷， load 更新文件。

B.刷新頁面

copy 了 api 一段代碼：

1. 1 當前文檔對應的 applicationCache 對象

2. window.applicationCache

3. 2 cache.status 屬性 , 返回當前離線應用的狀態

4. UNCACHED ( 數值 0) ：未啟用離線應用

5. IDLE ( 數值 1) ：已開啟離線應用，但本地緩存的資源是最新的，并且未標記為廢棄資源

6. CHECKING ( 數值 2) ：當前更新緩存的狀態為 “ 檢查中 ”

7. DOWNLOADING ( 數值 3) ：當前更新緩存的狀態為 “ 下載資源中 ”

8. UPDATEREADY ( 數值 4) ：當前更新緩存的狀態為 “ 更新完畢 ”

9. OBSOLETE ( 數值 5) ：已開啟離線應用，但緩存資源都已標記為廢棄

3.7. 如何更新緩存

如下三種方式，可以更新緩存：

·

更新manifest文件

·

·

通過javascript操作

·

·

清除瀏覽器緩存

·

給manifest添加或刪除文件，都可更新緩存，如果我們更改了js，而沒有新增或刪除，前面例子中注釋中的版本號，可以很好的用來更新manifest文件。

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

window.applicationCache.update();

如果用戶清除了瀏覽器緩存（手動或用其他一些工具）都會重新下載文件。

3.8. 注意事項

·

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

·

·

如果manifest文件，或者內部列舉的某一個文件不能正常下載，整個更新過程都將失敗，瀏覽器繼續全部使用老的緩存。

·

·

引用manifest的html必須與manifest文件同源，在同一個域下。

·

·

FALLBACK中的資源必須和manifest文件同源。

·

·

當一個資源被緩存后，該瀏覽器直接請求這個絕對路徑也會訪問緩存中的資源。

·

·

站點中的其他頁面即使沒有設置manifest屬性，請求的資源如果在緩存中也從緩存中訪問。

·

·

當manifest文件發生改變時，資源請求本身也會觸發更新

1. 標準鼓勵,緩存包含manifest清單的頁面,所以實際上,即使我們不顯示的把包含manifest的頁面，列在manifest緩存清單中,這個頁面也會被緩存的.

2. HTTP相關的緩存頭域 以及 https的緩存頁面限制,將被manifest所無視. 所以在用戶代理 更新頁面之前,它是不會過期的. 也就是說,即使是一個HTTPS的東西.也可以脫機工作.

參考

HTML5 AppCache機制分析 - liqinghua1653的專欄 - 博客頻道 - CSDN.NET.html

慎用manifest - 推酷.html

HTML5應用程序緩存Application Cache - 葉小釵 - 博客園.html

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com