標籤：
嚇哭原生App的HTML5離線儲存技術，卻出乎意料的容易！【WeX5低調轉載】 2015-11-16 lakb248 起步軟體近幾天，WeX5小編編跟部分行動裝置 App從業人士聊了聊，很多已經準備好全面擁抱HTML5。但WeX5小編編也發現，依然有相當一部分從業者，仍然對HTML5將信將疑，仍對原生App技術戀戀不捨。小編編特意轉寄分享下文，HTML5技術崛起，從離線儲存技術是可見一斑的。
（本文）隨著Web App的發展，越來越多的移動端App使用HTML5的方式來開發，除了一些Hybrid App以外，其他一部分Web App還直接通過瀏覽器就完成了訪問。而瀏覽器訪問就需要連網發送請求，這樣就使得使用者在離線的狀態下無法使用App，同時Web App中一部分資源並不是經常改變，並不需要每次都向伺服器發出請求，出於這些原因，HTML5提出的一個新的特性：離線儲存。通過離線儲存，我們可以通過把需要離線儲存在本地的檔案列在一個manifest設定檔中，這樣即使在離線的情況下，使用者也可以正常使用App。
HTML5離線儲存這個概念和cookie相似，區別是它是為了更大型存放區設計的。cookie的儲存限制在了4k之內，相比來說，session storage有了更大的儲存空間，但至於具體多大，這要參照瀏覽器廠商的具體實現。
怎麼用首先來講解下離線儲存的使用方法，說起來也很簡單。只要在你的頁面頭部像下面一樣加入一個manifest的屬性就可以了。
<!DOCTYPE HTML><html manifest = "cache.manifest">...</html>
然後cache.manifest檔案的書寫方式，就像下面這樣：
CACHE MANIFEST#v0.11CACHE:js/app.jscss/style.cssNETWORK:resourse/logo.pngFALLBACK:/ /offline.html
離線儲存的manifest一般由三個部分組成:
1.CACHE:表示需要離線儲存的資源清單，由於包含manifest檔案的頁面將被自動離線儲存，所以不需要把頁面自身也列出來。
2.NETWORK:表示在它下面列出來的資源只有在線上的情況下才能訪問，他們不會被離線儲存，所以在離線情況下無法使用這些資源。不過，如果在CACHE和NETWORK中有一個相同的資源，那麼這個資源還是會被離線儲存，也就是說CACHE的優先順序更高。
3.FALLBACK:表示如果訪問第一個資源失敗，那麼就使用第二個資源來替換他，比如上面這個檔案表示的就是如果訪問根目錄下任何一個資源失敗了，那麼就去訪問offline.html。
那麼瀏覽器是怎麼對離線的資源進行管理和載入的呢？這裡需要分兩種情況來討論。
線上的情況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest檔案，如果是第一次訪問app，那麼瀏覽器就會根據manifest檔案的內容下載相應的資源並且進行離線儲存。如果已經訪問過app並且資源已經離線儲存了，那麼瀏覽器就會使用離線的資源載入頁面，然後瀏覽器會對比新的manifest檔案與舊的manifest檔案，如果檔案沒有發生改變，就不做任何操作，如果檔案改變了，那麼就會重新下載檔案中的資源並進行離線儲存。
離線的情況下，瀏覽器就直接使用離線儲存的資源。
這個過程中有幾個問題需要注意。
如果伺服器對離線的資源進行了更新，那麼必須更新manifest檔案之後這些資源才能被瀏覽器重新下載，如果只是更新了資源而沒有更新manifest檔案的話，瀏覽器並不會重新下載資源，也就是說還是使用原來離線儲存的資源。
對於manifest檔案進行緩衝的時候需要十分小心，因為可能出現一種情況就是你對manifest檔案進行了更新，但是http的緩衝規則告訴瀏覽器本機快取的manifest檔案還沒到期，這個情況下瀏覽器還是使用原來的manifest檔案，所以對於manifest檔案最好不要設定緩衝。
瀏覽器在下載manifest檔案中的資源的時候，它會一次性下載所有資源，如果某個資源由於某種原因下載失敗，那麼這次的所有更新就算是失敗的，瀏覽器還是會使用原來的資源。
在更新了資源之後，新的資源需要到下次再開啟app才會生效，如果需要資源馬上就能生效，那麼可以使用window.applicationCache.swapCache()方法來使之生效，出現這種現象的原因是瀏覽器會先使用離線資源載入頁面，然後再去檢查manifest是否有更新，所以需要到下次開啟頁面才會生效。
說了這麼多，不如自己動手來試試。這裡需要說明的是，如果需要看到離線儲存的效果，那麼你需要把你的網頁部署到伺服器上，不管是本地還是生產環境伺服器中，通過本地檔案開啟網頁是無法體驗到離線儲存的。
我在我的電腦上跑了一個本地node伺服器，通過localhost訪問。我的manifest檔案向下面這樣：
CACHE MANIFEST#v0.11CACHE:lib/ionic/js/ionic.bundle.jslib/angular-ui-router.jsjs/app.jslib/ionic/css/ionic.csscss/style.cssviews/login_header.htmlviews/login.htmllib/ionic/fonts/ionicons.ttf?v=1.5.2lib/ionic/fonts/ionicons.woff?v=1.5.2NETWORK:lib/ionic/fonts/ionicons.ttf?v=1.5.2lib/ionic/fonts/ionicons.woff?v=1.5.2css/style.css
然後我們可以訪問網頁看效果。
瀏覽器根據manifest檔案下載相應資源並且緩衝在本地。
然後，我們來試試離線狀態下是什麼情況，這才是離線儲存的重頭戲。通過Chrome設定離線狀態，重新整理頁面。
由於在離線狀態，所以瀏覽器無法訪問到manifest檔案，但是網頁還是可以正常訪問，這就是離線儲存的威力。
為了感受manifest的作用，我們現在再做額外的第一步嘗試，我們可以更新下伺服器上的部分資源，比如我只是修改下app.js；然後設定Chrome為線上狀態，可以發現，再次通過瀏覽器訪問時，更新的資源並沒有生效，不會在瀏覽器訪問中出現；
現繼續做第二步嘗試，現在我們更新下manifest檔案，比如把版本改為0.12，此時因為更新了manifest檔案，通過瀏覽器訪問時，對離線資源的更新就可以在瀏覽器上生效了。
對於HTML5中離線儲存物件window.applicationCache有幾個事件需要我們關注下：
1.oncached:當離線資源儲存完成之後觸發這個事件，這個是文檔的說法，我在Chrome上面測試的時候並沒有觸發這個事件。
2.onchecking:當瀏覽器對離線儲存資源進行更新檢查的時候會觸發這個事件
3.ondownloading:當瀏覽器開始下載離線資源的時候會觸發這個事件
4.onprogress:當瀏覽器在下載每一個資源的時候會觸發這個事件，每下載一個資源就會觸發一次。
5.onupdateready:當瀏覽器對離線資源更新完成之後會觸發這個事件
6.onnoupdate:當瀏覽器檢查更新之後發現沒有資源更新的時候觸發這個事件
本文參考文章：
https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache
http://diveintohtml5.info/offline.html
俺作為轉載本文的WeX5小編編，文科生一枚，編輯完本文格式居然就快學會了！WeX5小編編因而更不明白了，如此強大又簡便，為何很多人還在對HTML5這事還瞻前顧後？
“儘可能地再簡單點、再方便點”，這是技術變革亙古不變的方向。
HTML5的洪水該來還是會來，擋不住的。
嚇哭原生App的HTML5離線儲存技術，卻出乎意料的容易！【低調轉載】
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
