什么是Application Cache API？
HTML5提供了一系列的特性來支持離線應用：
- application cache
- localStrorage
- web SQL & indexed database
- online/offline events
哪些瀏覽器支持Application Cache API？
使用application cache能帶來什么好處？
- 用戶可以在離線時繼續使用
- 緩存到本地，節省帶寬，加速用戶體驗的反饋
- 減輕服務器的負載
如何使用application cache
CACHE MANIFEST # 以上折行必需要寫
CACHE:
# 這部分寫需要緩存的資源文件列表
# 可以是相對路徑也可以是絕對路徑 index.html index.css images/logo.png js/main.js
http://img.baidu.com/js/tangram-base-1.5.2.1.js NETWORK:
# 可選
# 這一部分是要繞過緩存直接讀取的文件 login.php
FALLBACK:
# 可選
# 這部分寫當訪問緩存失敗后，備用訪問的資源
# 每行兩個文件，第一個是訪問源，第二個是替換文件*.html /offline.html
manifest文件使用
寫完一個manifest文件之后，像下面這樣在你的web頁面中引用他
<html manifest="demo.cache"> ... </html>
其中文件后綴可以自定義，但是需要在服務器中進行相應配置，指定其為text/cache-manifest MIME 類型文件
在apache中定義如下：
AddType text/cache-manifest .cache
做完以上工作，你的應用程序就可以使用application cache了。
更新緩存的方式
開發人員想要通知客戶的瀏覽器更新application cache的方法有以下兩類：
- 更新manifest文件
瀏覽器發現manifest文件本身發生變化，便會根據新的manifest文件去獲取新的資源進行緩存。
當manifest文件列表並沒有變化的時候，我們通常通過修改manifest注釋的方式來改變文件，從而實現更新。
- 通過javascript操作
var appCache = window.applicationCache; appCache.update(); //嘗試更新緩存 ... if (appCache.status == window.applicationCache.UPDATEREADY) { appCache.swapCache(); //更新成功后，切換到新的緩存 }
另外，用戶想要更新緩存，可以通過刪除緩存文件的方式來清除緩存。
applicationCache對象
該對象是window對象的直接子對象，window.applicationCache
基類：DOMApplicationCache
事件列表：
| 事件 | 接口 | 觸發條件 | 后續事件 |
|---|---|---|---|
checking |
Event |
用戶代理檢查更新或者在第一次嘗試下載manifest文件的時候，本事件往往是事件隊列中第一個被觸發的 |
noupdate, downloading, obsolete, error |
noupdate |
Event |
檢測出manifest文件沒有更新 | 無 |
downloading |
Event |
用戶代理發現更新並且正在取資源，或者第一次下載manifest文件列表中列舉的資源 | progress, error, cached, updateready |
progress |
ProgressEvent |
用戶代理正在下載資源manifest文件中的需要緩存的資源 |
progress, error, cached, updateready |
cached |
Event |
manifest中列舉的資源已經下載完成，並且已經緩存 | 無 |
updateready |
Event |
manifest中列舉的文件已經重新下載並更新成功，接下來js可以使用swapCache()方法更新到應用程序中 |
無 |
obsolete |
Event |
manifest的請求出現404或者410錯誤，應用程序緩存被取消 |
無 |
error |
Event |
manifest的請求出現404或者410錯誤，更新緩存的請求失敗 |
無 |
| manifest文件沒有改變，但是頁面引用的manifest 文件沒有被正確地下載 |
|||
| 在取manifest列舉的資源的過程中發生致命的錯誤 |
|||
| 在更新過程中manifest文件發生變化 |
用戶代理會嘗試立即再次獲取文件 |
屬性：status 返回緩存的狀態
| 可選值 | 匹配常量 | 描述 |
| 0 |
appCache.UNCACHED
|
未緩存 |
| 1 |
appCache.IDLE
|
閑置 |
| 2 |
appCache.CHECKING
|
檢查中 |
| 3 |
appCache.DOWNLOADING
|
下載中 |
| 4 |
appCache.UPDATEREADY
|
已更新 |
| 5 |
appCache.OBSOLETE
|
失效 |
方法
| 方法名 | 描述 |
| update() | 發起應用程序緩存下載進程 |
| abort() | 取消正在進行的緩存下載 |
| swapcache() | 切換成本地最新的緩存環境 |
manifest解析機制
注意事項
- 站點離線存儲的容量限制是5M
- 如果manifest文件，或者內部列舉的某一個文件不能正常下載，整個更新過程將視為失敗，瀏覽器繼續全部使用老的緩存
- 引用manifest的html必須與manifest文件同源，在同一個域下
- 在manifest中使用的相對路徑，相對參照物為manifest文件
- CACHE MANIFEST字符串應在第一行，且必不可少
- 系統會自動緩存引用清單文件的 HTML 文件
- manifest文件中CACHE則與NETWORK，FALLBACK的位置順序沒有關系，如果是隱式聲明需要在最前面
- FALLBACK中的資源必須和manifest文件同源
- 當一個資源被緩存后，該瀏覽器直接請求這個絕對路徑也會訪問緩存中的資源。
- 站點中的其他頁面即使沒有設置manifest屬性，請求的資源如果在緩存中也從緩存中訪問
- 當manifest文件發生改變時，資源請求本身也會觸發更新
轉載時，請注明原文地址，謝謝！http://www.cnblogs.com/blackbird/archive/2012/06/12/2546751.html
本文參考
http://www.w3.org/TR/2008/NOTE-offline-webapps-20080530/#offline
http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#application-cache-api