471
移動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處於這些狀態時會觸發哪些事件呢，其實瀏覽器已經向我們暴漏了相應的事件，通過監聽這些事件我們做相應的處理:
同樣我們可以通過applicationCache的status屬性拿到appcache的各個狀態：
最後就可以通過監聽application cache的狀態和屬性來手動更新緩存
注意：通過swapCache()方法更新appcache以後必須再重新加載頁麵才能真正看到更新的內容。
到此為止我們已經介紹完了所有有關appcache的內容，在下篇文章中我們回來看看在實際的開發中到底如何才能更好的使用
application cache.
最後更新：2017-04-02 16:48:19