最近，整理了一下關於 H5離線應用緩存的知識，今天在家休息，和大家分享一下，希望對大的學習和工作，能有所幫助。
HTML5的離線web應用允許我們在脫機時與網站進行交互。這在提高網站的訪問速度和制作一款web離線應用上（如HTML5游戲）有一定的用處。
一、什麼是離線Web應程序？為什麼要開發離線的Web應用程序？
離線web應用程序是指：當客戶端本地與web應用程序的服務器沒有建立連接時，也能正常在客戶端本地使用該web應用程序進行有關操作。
Web應用程序已經變的越來越復雜，很多領域都在利用Web應用程序。但是，它有一個致命的缺點：如果用戶沒有和Internet建立連接，他就不能利用這個web應用程序了。因此H5新增了一個API，它使用一個本地緩存機制很好的解決了這個問題，使離線應用程序的開發成為了可能。
要想使web應用程序在離線狀態的時候也能正常工作，就必須把所有構成web應用程序的資源文件，如HTML文件、CSS文件、JavaScript腳本文件等放在本地緩存中，當服務器沒有和Internet建立連接時，也可以利用本地緩存中的資源文件正常運行web應用程序。
二、什麼是本地緩存，本地緩存與浏覽器網頁緩存的區別
Web應用程序的本地緩存與浏覽器的網頁緩存有許多方面都存在著明顯的區別。
1.本地緩存為整個web應用程序服務的，而浏覽器的網頁緩存只服務於單個網頁。任何網頁都具有網頁緩存。而本地緩存至緩存那些指定的緩存的頁面。
2.網頁緩存使不安全不可靠的，應為我們不知道在網站中到底緩存了哪些網頁，以及緩存了網頁上的哪些資源。而本地緩存是可靠的，我們可以控制對哪些內容進行緩存，不對哪些內容進行緩存，開發人員還可以利用編程的手段來控制緩存的更新，利用緩存對象的各種屬性、狀態和事件來開發出更加強大的離線應用程序。
3.（有些）浏覽器會主動保存自己的緩存文件以加快網站加載速度。但是要實現浏覽器緩存必須要滿足一個前提，那就是網絡必須要保持連接。如果網絡沒有連接，即 使浏覽器啟用了對一個站點的緩存，依然無法打開這個站點。只會收到一條錯誤信息。而使用離線web應用，我們可以主動告訴浏覽器應該從網站服務器中獲取或 緩存哪些文件，並且在網絡離線狀態下依然能夠訪問這個網站。
三、如何實現HTML5應用程序緩存？什麼是manifest文件，在文件中制定什麼內容需要進行本地緩存，哪些內容不需要？
實現HTML5應用程序緩存非常簡單，只需三步，並且不需要任何API。只需要告訴浏覽器需要離線緩存的文件，並對服務器和網頁做一些簡單的設置即可實現。
•創建一個 cache.manifest 文件，並確保文件具有正確的內容
•在服務器上設置內容類型
•所有的HTML文件都指向 cache.manifest
首先：創建manifest文件
Web應用程序的本地緩存是通過每個頁面的manifest文件來管理的，manifest文件是一個簡單的文本文件，在該文件中以清單的形式列舉了需要被緩存或不需要被緩存的資源文件的文件名稱，以及這些資源文件的訪問路徑，你可以為每一個頁面單獨指定一個manifest文件，也可以對整個web應用程序制定一個總的manifest文件。下面用一個示例對manifest文件做一個詳細的介紹：（該文件為hello.html網頁的manifest文件）
在manifest文件中，
2. 在manifest文件中，可以加上注釋來進行一些必要的說明或解釋。注釋行以”#”文字開頭。
4.指定資源文件，文件路徑可以是相對路徑，也可以是絕對路徑，指定時，每個資源文件為一行。在指定資源文件的時候，可以把資源文件分為三類，分別是CACHE、NETWORK、FALLBACK.
1)在CACHE類別中指定需要被緩存的本地資源文件。為某個頁面指定需要本地緩存的資源文件時，不需要把這個頁面本身指定在CACHE類別中，因為如果一個頁面具有manifest文件，浏覽器會自動對這個頁面進行本地緩存。
2)NETWORK類別為顯示指定不進行本地緩存的資源文件，這些文件只有當客戶端與服務器建立連接的時候才能訪問。本示例該類別中的”*”為通配符，表示沒有在本manifest文件中指定的資源文件都不進行本地緩存
3)FALLBACK類別中的每一行中指定兩個資源文件，第一個資源文件為能夠在線訪問時使用的資源文件，第二個資源文件為不能在線訪問時使用的備用資源文件。
以上這三個類別，每個類別都是可選的，但是如果文件開頭沒有指定類別而直接書寫資源文件的時候，浏覽器把這些資源文件視為CACHE類別，直到看見文件中第一個被書寫出來的類別為止。允許在同一個manifest文件中重復書寫同一類別。
其次：在服務器上設置內容類型
真正運行或測試離線web應用程序的時候，需要對服務器進行配置，讓服務器支持text/cache-manifest這個MIME類型（在h5中規定manifest文件的MIME類型是text/cache-manifest）。例如對Apache服務器進行配置的時候，需要找到｛apache_home｝/conf/mime.type這個文件(.htaccess)，並在文件最後添加如下所示代碼：text/cache-manifest .manifest 。在微軟的IIS服務器中的步驟如下所示：
1）右鍵選擇默認網站或需要添加類型的網站，彈出屬性對話框
2）選擇”http頭”標簽
3）在MIME映射下，單擊文件類型按鈕
4）在打開的MIME類型對話框中單擊新建按鈕
5）在關聯擴展名文本中輸入”manifest”，在內容類型文本框中輸入”text/cache-manifest”,然後點擊確定按鈕。
最後，將HML頁面那個指向manifest文件
我們需要將HTML頁面指向清單文件。通過設置每一個頁面中HTML元素的manifest屬性來完成這一步：<html manifest="/cache.manifest">完成這一步後，就完成了web離線緩存的所有步驟。由於浏覽的文件內容都沒有更改且存儲在本地，因此現在網頁的打開速度會更快（即使是在線狀態也如此）。
需要注意的問題：
•網站的每一個html頁面都必須設置html元素的manifest屬性。一定要這樣做；
•在你的整個網站應用中，只能有一個cache.manifest文件（建議放在網站根目錄下）；
•部分浏覽器（如IE8-）不支持HTML5離線緩存；
四、掌握進行本地緩存的applicationCache對象及其屬性和事件
當一個web應用從緩存中載入的時候，所有與之相關的文件也是直接從緩存中獲取。在線狀態下，浏覽器會異步地檢查清單文件是否有更新。如果有更新，新的清單文件以及清單中的列舉的所有文件都會下載下來重新保存到程序緩存中。但是，要注意是，浏覽器只是檢查清單文件，而不會檢查緩存的文件是否有更新：只檢查清單文件manifest文件。
如果修改一個緩存的js文件，並且要想讓該文件生效，就必須去更新下清單文件。由於應用程序依賴的文件列表其實並沒有變化，因此最簡單的方式就是更新版本s
CHCHE MANIFEST
CACHE:
#MyApp version 1 (更改這個數字以便讓浏覽器重新下載)
myapp.html
myapp.css
myapp.js
同樣“卸載“，就要在服務器端刪除清單文件，使得請求該文件的時候返回404，同時，修改html文件以便他們與該清單列表”斷開鏈接“。
注意：浏覽器檢查清單文件以及更新緩存的操作是異步的，可能是在從緩存中載入應用之前，也有可能是同時進行。因此對於簡單的web應用而言，在更新清單文件之後，用戶必須載入應用兩次才能保證最新的版本生效：第一次是從緩存中載入老版本隨後更新緩存；第二次才是從緩存中載入最新的版本。
浏覽器在更新緩存過程中會觸發一系列事件，可以通過注冊處理程序來跟蹤這個過程同時提供反饋用戶。
如：
applicationCache.onupdateready= function(){
var reload = confirm(“A new version of this application is available\n and will be used the next time you reload.\n”);
if(reload) location.reload();
}
該事件注冊在ApplicationCache對象上的，該對象是window的applicationCache屬性的值。支持應用程序緩存的浏覽器會定義該屬性。
//每當應用程序載入的時候，都會檢查該清單文件
//也總會首先觸發“checking”事件
window.applicationCache.onchecking = function(){
status(“checking for a new version.”);
return false;
}
//如果沒有改動，同時應用程序也已經緩存了
//”noupdate”事件被觸發，整個過程結束
window.applicationCache.onnoupdate = function(){
}
//如果還未緩存應用程序，或者清單文件有改動
//那麼浏覽器會下載並緩存清單中的所有資源
//觸發”downloading”事件，同時意味著下載過程開始
window.applicationCache.ondownloading = function(){
status(“Downloading new version manifest”);
window.progresscount = 0;
return false;
}
//在下載過程中會間斷性觸發“progress“事件
//通常是在每個文件下載完畢的時候
window.applicationCache.onprogress = function(e){}
//當下載完成並且首次將應用程序下載到緩存中時，浏覽器會觸發“cached“事件
window.applicationCache.oncached = function(e){
status(“Thisapplication is now cached locally”);
return false;
}
//當下載完成並將緩存中的應用程序更新後，浏覽器會觸發”updaterady”事件
//要注意的是：觸發此事件的時候，用戶任然可以看到老版本的應用程序
window.applicationCache.onupdateready = function(e){
status(“Anew version has been downloaded. Reload to run it”);
return false;
}
//如果浏覽器處於離線狀態，檢查清單列表失敗，則會觸發“error“事件
//當一個未緩存的應用程序引用一個不存在的清單文件，也會觸發此事件
window.applicationCache.onerror = function(e){
status(“Couldn’tload manifest or cache application”);
return false;
}
//如果一個緩存的應用程序引用一個不存在的清單文件，會觸發“obsolete“
//同時將應用從緩存中移除之後不會從緩存而是通過網絡加載資源
window.applicationCache.onobsolete = function(e){
status(“Thisapplication is no longer cached. Reload to get the latest version from thenetwork.”);
return false;
}
n ApplicationCache.UNCACHED(0)
應用程序沒有設置manifest屬性：未緩存
n ApplicationCache.IDLE(1)
清單文件已經檢查完畢，並且已經緩存了最新的應用程序
n ApplicationCache.CHECKING(2)
浏覽器正在檢查清單文件
n ApplicationCache.DOWNLOADING(3)
浏覽器正在下載並緩存清單中列舉的所有文件
n ApplicationCache.UPDATEREADY(4)
已經下載和緩存了最新版的應用程序
n ApplicationCache.OBSOLETE(5)
清單文件不存在，緩存將被清除
n update
顯式調用了更新緩存算法以檢測是否有最新版本的的應用程序。這導致浏覽器檢測同一個清單文件（並觸發相同的事件），這和第一次載入應用程序時的效果是一樣的。
n swapCache
它告訴浏覽器可以棄用老緩存，所有的請求都從新緩存中獲取。注意，這並不會重新載入應用程序：所有已經載入的html文件、圖片、腳本等資源都不會改變。但是，之後的請求將從最新的緩存中獲取。這會導致“版本錯亂”的問題，因此一般不推薦使用，除非應用程序設計得很好，確保這樣的方式沒有問題。只有當ApplicationCache.UPDATEREADY和ApplicationCache.ABSOLETE 時調用 swapCache()才有意義（當狀態OBSOLETE時，調用它可以立即棄用廢棄的緩存，讓之後所有的請求都通過網絡獲取）。如果狀態屬性是其他數值的時候調用swapCache()方法，它就會拋出異常。
六、如何判斷在線還是離線狀態？
離線web應用指的是將自己“安裝”在應用程序緩存中的程序，使得哪怕在浏覽器處於離線狀態時依然可訪問它。為了在離線狀態可用，Web應用需要可以告知別人自己是離線還是在線，同時當網絡連接的狀態發生改變時候也能“感知”到。通過navigator.onLine屬性，navigator.onLine是HTML5定義用來檢測設備是在線還是離線。對應的值為false或true。
但是不同浏覽器表現並不一致。
HTML5定義了online&offline事件用於監聽網絡狀態變化。
window.addEventListener('online', callback); // 離線到上線
window.addEventListener('offline', callback); // 上線到離線
目前除了IE（IE只支持navigator.onLine屬性）外，其他最新浏覽器都支持這個事件。