随着移動網際網路越來越普及， 在移動端采用web技術解決跨平台、快速部署、快速釋出的方案也越來越多。 但對于web方式實作的app又面臨者網絡的強依賴，對網速和流量有較高要求，針對此問題html提出了AppCache方案， 用于解決web離線緩存問題。
那什麼是AppCache呢？
顧名思義，AppCache就是對app記憶體緩存的方案，具體表現為當請求某個檔案時不是從網絡擷取該檔案，而是從本地擷取。
AppCache好處
應用程式緩存為應用帶來三個優勢：
- 離線浏覽 - 使用者可在應用離線時使用它們
- 速度 - 已緩存資源加載得更快
- 減少伺服器負載 - 浏覽器将隻從伺服器下載下傳更新過或更改過的資源
下面我們來看個例子:
未添加AppCache情況
檔案夾下有4個檔案，
檔案内容如下： index.html
<!DOCTYPE HTML>
<html>
<head>
<title>AppCache</title>
<script src="index.js"></script>
<link rel="stylesheet" href="index.css" target="_blank" rel="external nofollow" >
</head>
<body>
<img src="logo.jpg">
<p>The time is: <output id="current_date"></output></p>
</body>
</html>
index.css
output { font: 2em sans-serif; }
index.js
setInterval(function () {
document.getElementById('<span style="font-family: Arial, Helvetica, sans-serif;">current_date</span><span style="font-family: Arial, Helvetica, sans-serif;">').value = new Date();</span>
}, 1000);
請求index.html, 會依次下載下傳以下檔案：
1 http://localhost/demo/wqjsdk/test_apps/AppCache/index.html
2 http://localhost/demo/wqjsdk/test_apps/AppCache/index.css
3 http://localhost/demo/wqjsdk/test_apps/AppCache/index.js
4 http://localhost/demo/wqjsdk/test_apps/AppCache/logo.jpg
再次重新整理頁面也會更新這些檔案（當檔案内容并無實際更新是也會發起http請求， http傳回304， 但也會發起http請求）
觀察htto request header可以看到pragma設定了no-cache
Cache-Control max-age=0
Pragma no-cache
添加AppCache
添加檔案index.appcache, 内容為：
CACHE MANIFEST
index.html
index.css
index.js
logo.jpg
同時修改index.html, 添加
<html manifest="index.appcache">
再次請求index.html，
結果如下，第一次請求會把所有檔案都拉下來，這裡就不列出了， 同時會請求index.appcache檔案.
重新整理頁面會發現隻請求了一個檔案：
1 http://localhost/demo/wqjsdk/test_apps/AppCache/index.appcache
這時修改index.html檔案再次請求并不會更新index.html檔案， 說明index.html已經緩存，并不會從server端擷取。
更新緩存
一旦應用被緩存，它就會保持緩存直到發生下列情況：
- 使用者清空浏覽器緩存
- manifest 檔案被修改
- 由程式來更新應用緩存
更新appcache檔案會導緻所有檔案重新請求，
注： 更新index.appcache會導緻所有檔案都重新請求， 但當次并不生效而是要等到下一次請求才能生效， 當次顯示還是采用之前緩存過得檔案。
appcache檔案格式
manifest 檔案是簡單的文本檔案，它告知浏覽器被緩存的内容（以及不緩存的内容）。
manifest 檔案可分為三個部分：
- CACHE MANIFEST - 在此标題下列出的檔案将在首次下載下傳後進行緩存，等價于CACHE：
- NETWORK - 在此标題下列出的檔案需要與伺服器的連接配接，且不會被緩存
- FALLBACK - 在此标題下列出的檔案規定當頁面無法通路時的回退頁面（比如 404 頁面）
我們更新index.appcache檔案如下
CACHE MANIFEST
index.css
CACHE:
logo.jpg
NETWORK:
*
FALLBACK:
info.html 404.html
注意： 首頁一定會被緩存起來的，因為AppCache主要是用來做離線應用的，如果首頁不緩存就無法離線插件了，是以把index.html添加到NETWORK中是不起效果的。
詳細可以檢視http://www.whatwg.org/specs/web-apps/current-work/#offline
AppCache不足
AppCache設計初衷是為了離線檢視，盡量把能離線的檔案緩存到本地，以供離線時能正常檢視 ，但對線上更新并未提供太多機制和優化方案。html5 AppCache雖然沒有提供太多定制， 但我們可以根據不同應用場景提供不同的優化方案：
比如針對hybrid方案，可改進點： 1、 對manifest檔案更新，會重新請求所有檔案，實際上可能隻更新了很少量檔案。（ 雖然重新請求資源會傳回304， 但每個檔案還會發起請求） 針對此點可以隻更新需要更新的檔案， 比如可以建立一個檔案版本或者MD5映射，對相同版本或者MD5不再請求 2. manifest檔案每次都會請求，我們可以按照一定時間更新一次，或者啟動時更新一次，以減少manifest檔案更新次數 3. 對hybrid方案還可以在打開app之前預緩存，提前下載下傳檔案或者更新manifest檔案。
![軟體測試——Web測試基礎理論知識思維導圖[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)