嚇哭原生App的HTML5離線存儲技術，卻出乎意料的容易！【低調轉載】

時間 2019-11-15

標籤原生 app html5 html 離線存儲技術出乎意料容易低調轉載欄目 HTML5 简体版

原文原文鏈接

嚇哭原生App的HTML5離線存儲技術，卻出乎意料的容易！【WeX5低調轉載】

2015-11-16 lakb248 起步軟件

近幾天，WeX5小編編跟部分移動應用從業人士聊了聊，不少已經準備好全面擁抱HTML5。但WeX5小編編也發現，依然有至關一部分從業者，仍然對HTML5將信將疑，仍對原生App技術依依不捨。小編編特地轉發分享下文，HTML5技術崛起，從離線存儲技術是可見一斑的。
css

（正文）隨着Web App的發展，愈來愈多的移動端App使用HTML5的方式來開發，除了一些Hybrid App之外，其餘一部分Web App還直接經過瀏覽器就完成了訪問。而瀏覽器訪問就須要聯網發送請求，這樣就使得用戶在離線的狀態下沒法使用App，同時Web App中一部分資源並非常常改變，並不須要每次都向服務器發出請求，出於這些緣由，HTML5提出的一個新的特性：離線存儲。經過離線存儲，咱們能夠經過把須要離線存儲在本地的文件列在一個manifest配置文件中，這樣即便在離線的狀況下，用戶也能夠正常使用App。html

HTML5離線存儲這個概念和cookie類似，區別是它是爲了更大容量存儲設計的。cookie的存儲限制在了4k以內，相比來講，session storage有了更大的存儲空間，但至於具體多大，這要參照瀏覽器廠商的具體實現。html5

怎麼用

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

<!DOCTYPE HTML> <html manifest = "cache.manifest"> ... </html>瀏覽器

而後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的優先級更高。
3.FALLBACK:表示若是訪問第一個資源失敗，那麼就使用第二個資源來替換他，好比上面這個文件表示的就是若是訪問根目錄下任何一個資源失敗了，那麼就去訪問offline.html。cookie

瀏覽器怎麼解析manifest

那麼瀏覽器是怎麼對離線的資源進行管理和加載的呢？這裏須要分兩種狀況來討論。session

在線的狀況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest文件，若是是第一次訪問app，那麼瀏覽器就會根據manifest文件的內容下載相應的資源而且進行離線存儲。若是已經訪問過app而且資源已經離線存儲了，那麼瀏覽器就會使用離線的資源加載頁面，而後瀏覽器會對比新的manifest文件與舊的manifest文件，若是文件沒有發生改變，就不作任何操做，若是文件改變了，那麼就會從新下載文件中的資源並進行離線存儲。app
離線的狀況下，瀏覽器就直接使用離線存儲的資源。

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

若是服務器對離線的資源進行了更新，那麼必須更新manifest文件以後這些資源才能被瀏覽器從新下載，若是隻是更新了資源而沒有更新manifest文件的話，瀏覽器並不會從新下載資源，也就是說仍是使用原來離線存儲的資源。
對於manifest文件進行緩存的時候須要十分當心，由於可能出現一種狀況就是你對manifest文件進行了更新，可是http的緩存規則告訴瀏覽器本地緩存的manifest文件還沒過時，這個狀況下瀏覽器仍是使用原來的manifest文件，因此對於manifest文件最好不要設置緩存。
瀏覽器在下載manifest文件中的資源的時候，它會一次性下載全部資源，若是某個資源因爲某種緣由下載失敗，那麼此次的全部更新就算是失敗的，瀏覽器仍是會使用原來的資源。
在更新了資源以後，新的資源須要到下次再打開app纔會生效，若是須要資源立刻就能生效，那麼可使用window.applicationCache.swapCache()方法來使之生效，出現這種現象的緣由是瀏覽器會先使用離線資源加載頁面，而後再去檢查manifest是否有更新，因此須要到下次打開頁面才能生效。

我們來試試吧

說了這麼多，不如本身動手來試試。這裏須要說明的是，若是須要看到離線存儲的效果，那麼你須要把你的網頁部署到服務器上，不論是本地仍是生產環境服務器中，經過本地文件打開網頁是沒法體驗到離線存儲的。
我在個人電腦上跑了一個本地node服務器，經過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

而後咱們能夠訪問網頁看效果。

瀏覽器根據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:當瀏覽器檢查更新以後發現沒有資源更新的時候觸發這個事件