如何使用
首先，我們建立一個html文件，類似這樣：
<!DOCTYPE html> <html lang="en" manifest="manifest.appcache"> <head> <meta charset="UTF-8"> <title>APP CACHE</title> <link rel="stylesheet" type="text/css" href="test.css"> </head><!-- text/cache-mainfest --> <body> <img src="img/1.jpg"> <img src="img/2.jpg"> <script type="text/javascript"> window.addEventListener('load', function(e){ console.log(window.applicationCache.status); }) </script> </body> </html>
可能有些代碼看不懂，我們先看最簡單的，第一行配置了一個manifest=”manifest.appcache”（注意是mani不是main），這是使用app cache首先要配置的，然后我們在這個html文件里引入了兩個img做為測試用，然后監聽了load時間來查看看application的status，關於applicationCache的api，可以查看。
然后在相同目錄下新建一個manifest.appcache文件，注意關於路徑要和html頁面配置時一致即可。
CACHE MANIFEST
#version 1.3
CACHE:
img/1.jpg
img/2.jpg
test.css
NETWORK:
*
關於manifest.appcache文件，基本格式為三段： CACHE， NETWORK，與 FALLBACK，其中NETWORK和FALLBACK為可選項，而第一行CACHE MANIFEST為固定格式，必須寫在前面。
CACHE:（必須）
標識出哪些文件需要緩存，可以是相對路徑也可以是絕對路徑。例如：aa.css，http://www.baidu.com/aa.js.
NETWORK:（可選）
這一部分是要繞過緩存直接讀取的文件，可以使用通配符＊，,也就是說除了上面的cache文件，剩下的文件每次都要重新拉取。例如＊，login.php。
FALLBACK:（可選）
指定了一個后備頁面，當資源無法訪問時，瀏覽器會使用該頁面。該段落的每條記錄都列出兩個 URI—第一個表示資源，第二個表示后備頁面。兩個 URI 都必須使用相對路徑並且與清單文件同源。可以使用通配符。例如*.html /offline.html。
manifest 文件需要配置正確的 MIME-type，即 "text/cache-manifest"。必須在 web 服務器上進行配置
OK，上面文件配置完成之后，application cache就可以運行了。
查看console：
可以看到，一下子這么多log，但是除了4是我們console的log之外，其他的都是appcache自己打的，因為我們配置了manifest，系統會默認打出appcache的log。關於status的值：
| 可選值 | 匹配常量 | 描述 |
| 0 | appCache.UNCACHED |
未緩存 |
| 1 | appCache.IDLE |
閑置 |
| 2 | appCache.CHECKING |
檢查中 |
| 3 | appCache.DOWNLOADING |
下載中 |
| 4 | appCache.UPDATEREADY |
已更新 |
| 5 | appCache.OBSOLETE |
失效 |
然后，通過log，我們看到一些文件已經被緩存，我們可以查看chrome Resources來查看：
可以看到我們的test.html文件也已經被緩存下來了，type是master，顧名思義一個管理着，而manifest.appcache文件為manifest類型。此時我們的appcache已經完成。我們可以嘗試把網線斷了，或者把服務器關了，同樣，我們的項目仍然可以訪問，這就是離線緩存。此時console：
證明直接從緩存拿去文件：
更新緩存的方式
- 更新manifest文件
瀏覽器發現manifest文件本身發生變化，便會根據新的manifest文件去獲取新的資源進行緩存。
當manifest文件列表並沒有變化的時候，我們通常通過修改manifest注釋的方式來改變文件，從而實現更新。
- 通過javascript操作
- 清除瀏覽器緩存
window.applicationCache.addEventListener('updateready', function(){
console.log('updateready!');
window.applicationCache.swapCache();//應用更新后的緩存來替換原來的緩存
});
清除瀏覽器緩存再試一次，這次我們在console里調用window.applicationCache.update();，看看發生了什么：
updateready事件觸發了，同樣，appcache也更新了緩存，其中swapCache方法的意思是重新應用更新后的緩存來替換原來的緩存！，到這里后基本的appcache也差不多了。
注意事項：
- 站點離線存儲的容量限制是5M
- 如果manifest文件，或者內部列舉的某一個文件不能正常下載，整個更新過程將視為失敗，瀏覽器繼續全部使用老的緩存
- 引用manifest的html必須與manifest文件同源，在同一個域下
- FALLBACK中的資源必須和manifest文件同源
- 當一個資源被緩存后，該瀏覽器直接請求這個絕對路徑也會訪問緩存中的資源。
- 站點中的其他頁面即使沒有設置manifest屬性，請求的資源如果在緩存中也從緩存中訪問
- 當manifest文件發生改變時，資源請求本身也會觸發更新
完！