轉於：https://blog.csdn.net/lijc_boke/article/details/69666021

版權宣告：隨便看，歡迎技術交流，523252797（qq） https://blog.csdn.net/lijc_boke/article/details/69666021

幹什麼用的？ 
離線快取為的是第一次請求後，根據manifest檔案進行本地快取，並且在下一次請求後進行展示（若有快取的話，無需再次進行請求而是直接呼叫快取），最根本的感覺是它使得WEB從online可以延伸到了offline領域。

應用場景
h5遊戲及一些頁面內容不經常會變動，相對較為固定的內容。

怎麼用的？
若想使用manifest功能，需要在需要進行快取功能的html檔案之中寫入 宣告

<meta manifest = ‘demo.appcache’> // 這個檔案格式是官方推薦的

這裡，若遇到如此報錯

 Application Cache Error event: Manifest fetch failed (404)

其原因是因為 manifest檔案需要正確的配置MIME-type（描述該訊息的媒體型別），即
“text/cache-manifest”，必須在伺服器端進行配置。

manifest檔案如何進行配置？

首先manifest分為三個部分

1、CACHE MANIFEST //指出需要進行manifest的檔案，此檔案將會在首次下載後被快取下來

CACHE MANIFESTCACHE:/index.css/index.html/index.js

2、NETWORK //指出需要向伺服器請求即不需要manifest的檔案，此檔案不會被快取，若為*則表示所有檔案均需要進行網路請求，而不使用快取。

NETWORK:*

3、FALLBACK //指出當頁面無法進行訪問時，顯示的頁面（替換的頁面），例子中，當html5資料夾中的檔案出現異常情況，，使用404.html頁面替換掉異常頁面 （第一個uri路徑是資源地址，第二個是備胎地址）

FALLBACK:/html5/ /404.html

完整的例項

1. CACHE MANIFEST# 2017-04-06 v1.0.0

2. CACHE:/theme.css/logo.gif/main.js

3. NETWORK:login.asp

4. FALLBACK:/html5/ /404.html

注意：這裡的版本號，是我們人為規定的，而非是manifest自帶的屬性，當每一次html載入到manifest時，會對manifest配置檔案進行髒檢查，當檢測到manifest檔案被修改後，之前的快取將會被棄用，轉而去根據manifest檔案中配置的新內容進行快取。

檢視：

670E294B-9EB2-48F9-9C1B-4885FD7AD37E.png

被快取的檔案可以使用谷歌瀏覽器進行檢視: f12 -> Application -> Application Cache

ftchinese 手機版使用了離線快取技術，可以去看下其原始碼以及快取的檔案是如何進行儲存的

問題！

manifest除了快取manifest.appcache檔案所指定的資源外，還必定會快取當前的html頁面，即

<meta manifest=‘demo.appcache'>

標籤所在的頁面以及demo.appcache檔案裡面所規定的靜態資源一併存入 application Cache 之中。
當用戶再一次訪問該頁面時，demo.appcache檔案之中CACHE MANIFEST所指向的資源就不需要重新進行載入了，但是問題是，當前的html頁面也會跟著cache直接讀出來了，可能會造成即使 我們的頁面更新了，但是使用者還是看的老舊版本頁面（因為更新mainfest的時候，頁面載入已經開始了，但是快取更新卻尚未完成，瀏覽器還是會使用快取的資源，當瀏覽器檢測到了Application Cache有更新時，本次不會使用新的資源，下一次才會進行使用）

解決方案：

1. applicationCache.addEventListener("updateready",function(){

2. applicationCache.swapCache(); // 手工更新本地快取

3. location.reload(); //重新載入頁面頁面

4. },true);

新增事件監聽，當監聽到本地快取更新後，進行過載頁面，以達到更新的目的。