天天看點

移動web app開發-----application cache 離線緩存原理篇

        上篇文章中寫了appcache的manifest檔案如何書寫,appcache的類型和狀态,下面我們通過這篇文章來學習下appcache的下載下傳和更新機制。

1.假如入我們要通路一個網站的首頁,它的html标簽有個manifest屬性。

2.頁面從伺服器端傳回,包括動态資源和靜态資源,同時靜态資源會采用浏覽器正常的緩存方式緩存起來。

3.當浏覽器解析頁面時,發現他的html标簽有一個manifest屬性,浏覽器會在背景把manifest檔案中要cache片段所指定

的資源下載下傳并緩存在application cache中(在這種情況cache中的資源會再次下載下傳)

4.這時候如果你把浏覽器設定為離線浏覽【regular caching is also in effect, so watch for false positives here.】

你在manifest檔案的network片段中指定需要聯網通路的資源,這時會不可用,但是在cache片段的資源沒有影響,

注意:在opare和firefox中可以通過【檔案---脫機】工作,把浏覽器設為離線模式,在chrome和safari中沒有這樣的設定,

但是可以通過代理來達到同樣的目的

4.1 這時候你通路cache中的資源,會直接從appcache中取得緩存中的内容

4.2這時候你通路network中的資源,會顯示fallback中指定的資源

下面你如果取消離線模式,重新連上網,後續的過程如下

1.傳回線上模式

2.你在伺服器端改變一個檔案的内容【如cache.html】

3.這時候重新加載cache.html,頁面上會顯示從appcache中加載的原來的内容,即使你聯網了,内容仍然沒有改變,這是因為

一旦一個檔案在appcache中緩存,以後會永遠呈現第一次記載的内容,

4.這時候浏覽器會檢查manifest檔案是否更新,如果沒有更新,就不會做任何事。

注意:隻有manifest檔案改變,緩存中要更新的檔案才能更新

5.更新menifest檔案

最佳實踐:一般通過注釋的方式為manifest檔案增加版本号,一旦檔案更改,就需要修改版本号。

6.你重新加載cache.html

7.浏覽器仍然從緩存中加載老的内容,緩存中更改的内容這時并沒有呈現。

8.浏覽器檢查manifest是否更新,這時manifeset檔案更新了,他會通過浏覽器正常緩存檢查檔案的狀态,有可能是304或者200

注意:這裡檢查所有檔案的狀态,比較耗性能,這裡有個比較不錯的解決方案

9.這時緩存會被重新更新,當下次再從新重新整理頁面,就會看到更新的内容。

在上篇文章中我們介紹了appcache的可能的各種狀态,那麼當appcache處于這些狀态時會觸發哪些事件呢,其實浏覽器已經向我們暴漏了相應的事件,通過監聽這些事件我們做相應的處理:

移動web app開發-----application cache 離線緩存原理篇

同樣我們可以通過applicationcache的status屬性拿到appcache的各個狀态:

移動web app開發-----application cache 離線緩存原理篇

最後就可以通過監聽application cache的狀态和屬性來手動更新緩存

移動web app開發-----application cache 離線緩存原理篇

注意:通過swapcache()方法更新appcache以後必須再重新加載頁面才能真正看到更新的内容。

到此為止我們已經介紹完了所有有關appcache的内容,在下篇文章中我們回來看看在實際的開發中到底如何才能更好的使用

application cache.