摘要：表示在它下面列出來的資源只有在在線的情況下才能訪問，他們不會被離線存儲，所以在離線情況下無法使用這些資源。不過，如果在和中有一個相同的資源，那么這個資源還是會被離線存儲，也就是說的優(yōu)先級更高。離線的情況下，瀏覽器就直接使用離線存儲的資源。

最近由于找工作一直沒時間也沒有精力更新博客，找工作真是一件苦逼的事情啊。。。不抱怨了，我們來看看HTML5的新特性---離線存儲吧。

隨著Web App的發(fā)展，越來越多的移動端App使用HTML5的方式來開發(fā)，除了一些HybridApp以外，其他一部分Web App還是通過瀏覽器來訪問的，通過瀏覽器訪問就需要聯(lián)網(wǎng)發(fā)送請求，這樣就使得用戶在離線的狀態(tài)下無法使用App，同時Web App中一部分資源并不是經(jīng)常改變，并不需要每次都向服務(wù)器發(fā)出請求，出于這些原因，HTML5提出的一個新的特性：離線存儲。通過離線存儲，我們可以通過把需要離線存儲在本地的文件列在一個manifest配置文件中，這樣即使在離線的情況下，用戶也可以正常使用App。

首先來講解下離線存儲的使用方法，說起來也很簡單。只要在你的頁面頭部像下面一樣加入一個manifest的屬性就可以了。

...

然后cache.manifest文件的書寫方式，就像下面這樣：

CACHE MANIFEST
#v0.11

CACHE:

js/app.js
css/style.css

NETWORK:
resourse/logo.png

FALLBACK:
/ /offline.html

離線存儲的manifest一般由三個部分組成:
1.CACHE:表示需要離線存儲的資源列表，由于包含manifest文件的頁面將被自動離線存儲，所以不需要把頁面自身也列出來。
2.NETWORK:表示在它下面列出來的資源只有在在線的情況下才能訪問，他們不會被離線存儲，所以在離線情況下無法使用這些資源。不過，如果在CACHE和NETWORK中有一個相同的資源，那么這個資源還是會被離線存儲，也就是說CACHE的優(yōu)先級更高。
3.FALLBACK:表示如果訪問第一個資源失敗，那么就使用第二個資源來替換他，比如上面這個文件表示的就是如果訪問根目錄下任何一個資源失敗了，那么就去訪問offline.html。

那么瀏覽器是怎么對離線的資源進行管理和加載的呢？這里需要分兩種情況來討論。

在線的情況下，瀏覽器發(fā)現(xiàn)html頭部有manifest屬性，它會請求manifest文件，如果是第一次訪問app，那么瀏覽器就會根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源并且進行離線存儲。如果已經(jīng)訪問過app并且資源已經(jīng)離線存儲了，那么瀏覽器就會使用離線的資源加載頁面，然后瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發(fā)生改變，就不做任何操作，如果文件改變了，那么就會重新下載文件中的資源并進行離線存儲。

離線的情況下，瀏覽器就直接使用離線存儲的資源。

這個過程中有幾個問題需要注意。

如果服務(wù)器對離線的資源進行了更新，那么必須更新manifest文件之后這些資源才能被瀏覽器重新下載，如果只是更新了資源而沒有更新manifest文件的話，瀏覽器并不會重新下載資源，也就是說還是使用原來離線存儲的資源。

對于manifest文件進行緩存的時候需要十分小心，因為可能出現(xiàn)一種情況就是你對manifest文件進行了更新，但是http的緩存規(guī)則告訴瀏覽器本地緩存的manifest文件還沒過期，這個情況下瀏覽器還是使用原來的manifest文件，所以對于manifest文件最好不要設(shè)置緩存。

瀏覽器在下載manifest文件中的資源的時候，它會一次性下載所有資源，如果某個資源由于某種原因下載失敗，那么這次的所有更新就算是失敗的，瀏覽器還是會使用原來的資源。

在更新了資源之后，新的資源需要到下次再打開app才會生效，如果需要資源馬上就能生效，那么可以使用window.applicationCache.swapCache()方法來使之生效，出現(xiàn)這種現(xiàn)象的原因是瀏覽器會先使用離線資源加載頁面，然后再去檢查manifest是否有更新，所以需要到下次打開頁面才能生效。

說了這么多，不如自己動手來試試。這里需要說明的是，如果需要看到離線存儲的效果，那么你需要把你的網(wǎng)頁部署到服務(wù)器上，不管是本地還是生產(chǎn)環(huán)境服務(wù)器中，通過本地文件打開網(wǎng)頁是無法體驗到離線存儲的。
我在我的電腦上跑了一個本地node服務(wù)器，通過localhost訪問。我的manifest文件向下面這樣：

CACHE MANIFEST
#v0.11

CACHE:
lib/ionic/js/ionic.bundle.js
lib/angular-ui-router.js
js/app.js
lib/ionic/css/ionic.css
css/style.css
views/login_header.html
views/login.html
lib/ionic/fonts/ionicons.ttf?v=1.5.2
lib/ionic/fonts/ionicons.woff?v=1.5.2

NETWORK:
lib/ionic/fonts/ionicons.ttf?v=1.5.2
lib/ionic/fonts/ionicons.woff?v=1.5.2
css/style.css

然后我們訪問網(wǎng)頁看看效果。

可以看出瀏覽器根據(jù)manifest文件下載相應(yīng)資源并且緩存在本地，現(xiàn)在我們來試試再次訪問網(wǎng)頁

資源已經(jīng)離線存儲在本地，所以瀏覽器不需要再次下載資源，可以直接使用本地緩存的資源。接著，我們更新下服務(wù)器上的資源，比如我修改下app.js，結(jié)果我這里就不顯示了，跟上面那張圖是一樣的，更新的資源并沒有生效，現(xiàn)在我們更新下manifest文件，比如把版本改為0.12

很顯然，只有更新了manifest文件，對離線資源的更新才能在瀏覽器上生效。
最后，我們來試試離線狀態(tài)下是什么情況，這才是離線存儲的重頭戲。通過Chrome設(shè)置離線狀態(tài)，刷新頁面

由于在離線狀態(tài)，所以瀏覽器無法訪問到manifest文件，但是網(wǎng)頁還是可以正常訪問，這就是離線存儲的威力。
對于HTML5中離線存儲對象window.applicationCache有幾個事件需要我們關(guān)注下：

1.oncached:當離線資源存儲完成之后觸發(fā)這個事件，這個是文檔的說法，我在Chrome上面測試的時候并沒有觸發(fā)這個事件。
2.onchecking:當瀏覽器對離線存儲資源進行更新檢查的時候會觸發(fā)這個事件
3.ondownloading:當瀏覽器開始下載離線資源的時候會觸發(fā)這個事件
4.onprogress:當瀏覽器在下載每一個資源的時候會觸發(fā)這個事件，每下載一個資源就會觸發(fā)一次。
5.onupdateready:當瀏覽器對離線資源更新完成之后會觸發(fā)這個事件
6.onnoupdate:當瀏覽器檢查更新之后發(fā)現(xiàn)沒有資源更新的時候觸發(fā)這個事件

參考文章：
https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache
http://diveintohtml5.info/offline.html