Html5利用AppCache和LocalStorage實現快取h5頁面資料
最近在開發的過程中遇到了一個問題，就是在Android上通過WebView載入Html5頁面時發現頁面載入速度慢，再加上網路速度慢，每次請求需要5s左右的時間，嚴重影響使用者體驗，所以查詢資料，最終找到一個可以解決載入緩慢的方法，現在介紹給大家：
1、使用AppCache機制實現快取html，css，js檔案和一些本地圖片，這種快取方法使用manifest檔案進行快取資料，一般manifest檔案預設字尾名為 .appcache，在設定快取以後，第一次載入頁面時會根據manifest檔案中列出的快取檔案路徑，將檔案進行快取到瀏覽器，在再次開啟的時候，不會再次從伺服器請求，而是載入快取資料。但是如果manifest檔案沒有發生改變，那麼伺服器上的相關頁面發生改動，載入時也是隻會載入快取的資料，不會進行更新；如果需要更新，必須改動manifest檔案，哪怕只是一個空格或者換行。開啟快取機制需要兩步:
(1). 需要在伺服器端做AppCache快取處理：
在每個需要快取的html頁面增加manifest屬性，設定AppCache檔案，進行快取。
建立manifest檔案
**manifest檔案（manifest.appcache）**
CACHE MANIFEST
#VERSION 2016-09-28 14:44
# 直接快取的檔案
CACHE:
../index.html
../css/index.css
../js/jquery-2.2.4.min.js
../js/index.js
../images/loading.gif
../images/index_one.jpg manifest檔案分為三個部分：CACHE，NETWORK 和 FALLBACK
CACHE：是所需要快取檔案的路徑可以是絕對路徑或者相對路徑，一般相對路徑比較好。
NETWORK ：是需要即時從伺服器請求的檔案，一般預設*號，表示除CACHE所列所見以外的檔案都是需要即時請求更新的。
FALLBACK：這個頁面時當快取請求失敗時所需展示的頁面，一般預設一個錯誤頁面。
VERSION：版本號，這是一個附加屬性，可有可無，加這個是為了在頁面改動時，可以進行改動此版本號，使得manifest檔案發生改動，從而瀏覽器再次請求html頁面時，發現頁面manifest檔案進行改動，瀏覽器會從伺服器重新拉取更新的內容。
manifest檔案有了，現在所需做的就是把manifest檔案和Html檔案進行關聯，這個非常簡單：
在Html標籤中標籤有一個屬性manifest，就是用來關聯manifest檔案的，所以只需要在快取的html檔案中的html標籤上宣告manifest屬性，就可以進行AppCache快取。
<html manifest="manifest/manifest.appcache">
<head>
<title>AppCache快取測試</title>
</head>
<body>
這是一個Html的AppCache快取測試頁面！！！
</body>
</html>（2）這樣伺服器端的快取就處理好了，可以在瀏覽器上進行測試，是完全可以快取的，但是用在Android上使用WebView載入H5頁面時，則需要在Android端進行設定：
WebSettings webseting = m_webview.getSettings();
webseting.setDomStorageEnabled(true);
webseting.setAppCacheMaxSize(1024*1024*8);//設定緩衝大小，我設的是8M
String appCacheDir = this.getApplicationContext().getDir("cache", Context.MODE_PRIVATE).getPath();
webseting.setAppCachePath(appCacheDir);
webseting.setAllowFileAccess(true);
webseting.setAppCacheEnabled(true);
webseting.setCacheMode(WebSettings.LOAD_DEFAULT);//可以在載入前對網路進行判斷，如果有網路，則設定快取模式為 WebSettings.LOAD_DEFAULT，從伺服器請求資料， 如果沒有網路測設定快取模式為WebSettings.LOAD_CACHE_ELSE_NETWORK快取模式(5種)
LOAD_CACHE_ONLY: 不使用網路，只讀取本地快取資料
LOAD_DEFAULT: 根據cache-control決定是否從網路上取資料。
LOAD_CACHE_NORMAL: API level 17中已經廢棄, 從API level 11開始作用同LOAD_DEFAULT模式
LOAD_NO_CACHE: 不使用快取，只從網路獲取資料.
LOAD_CACHE_ELSE_NETWORK: 只要本地有，無論是否過期，或者no-cache，都使用快取中的資料。
如：www.taobao.com的cache-control為no-cache，在模式LOAD_DEFAULT下，無論如何都會從網路上取資料，如果沒有網路，就會出現錯誤頁面；在LOAD_CACHE_ELSE_NETWORK模式下，無論是否有網路，只要本地有快取，都使用快取。本地沒有快取時才從網路上獲取。
www.360.com.cn的cache-control為max-age=60，在兩種模式下都使用本地快取資料。
a、快取構成
根據setAppCachePath(String appCachePath)提供的路徑，在H5使用快取過程中生成的快取檔案。
b、快取模式
無模式選擇，通過setAppCacheEnabled(boolean flag)設定是否開啟。預設關閉，即，H5的快取無法使用。
c、清除快取
找到呼叫setAppCachePath(String appCachePath)設定快取的路徑，把它下面的檔案全部刪除就OK了。
clearCache(boolean)
CacheManager.clear高版本中需要呼叫隱藏API。
d、控制大小
通過setAppCacheMaxSize(long appCacheMaxSize)設定快取最大容量，預設為Max Integer。
同時，可能通過覆蓋WebChromeClient.onReachedMaxAppCacheSize(long requiredStorage, long quota, WebStorage.QuotaUpdater quotaUpdater)來設定快取超過先前設定的最大容量時的策略。
這樣一來，通過設定伺服器端的快取，與Android前端的快取，就可以有效解決Html5的載入緩慢問題，該方法雖然解決了快取問題，但是會發現只是在第二次開啟是速度會明顯提升，但是在首次進行載入時，頁面載入還是非常緩慢的，目前還沒想到方案進行解決，後面如果找到方法，則會繼續更新！
發表部落格是為了做個筆記，並且和各位讀者進行交流，互相學習，如果哪位讀者有更好地解決方案，請麻煩留言告知，萬分謝謝！