html5離線存儲
HTML5提出的一個新的特性:離線存儲。通過離線存儲,我們可以通過把需要離線存儲在本地的文件列在一個manifest配置文件中,這樣即使在離線的情況下,用戶也可以正常使用App。
怎麽用
首先來講解下離線存儲的使用方法,說起來也很簡單。只要在你的頁面頭部像下面一樣加入一個manifest
的屬性就可以了。
<!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。
瀏覽器怎麽解析manifest
那麽瀏覽器是怎麽對離線的資源進行管理和加載的呢?這裏需要分兩種情況來討論。
-
在線的情況下,瀏覽器發現html頭部有manifest屬性,它會請求manifest文件,如果是第一次訪問app,那麽瀏覽器就會根據manifest文件的內容下載相應的資源並且進行離線存儲。如果已經訪問過app並且資源已經離線存儲了,那麽瀏覽器就會使用離線的資源加載頁面,然後瀏覽器會對比新的manifest文件與舊的manifest文件,如果文件沒有發生改變,就不做任何操作,如果文件改變了,那麽就會重新下載文件中的資源並進行離線存儲。
-
離線的情況下,瀏覽器就直接使用離線存儲的資源。
這個過程中有幾個問題需要註意:
-
如果服務器對離線的資源進行了更新,那麽必須更新manifest文件之後這些資源才能被瀏覽器重新下載,如果只是更新了資源而沒有更新manifest文件的話,瀏覽器並不會重新下載資源,也就是說還是使用原來離線存儲的資源。
-
對於manifest文件進行緩存時要十分小心,因為可能出現一種情況就是你對manifest文件進行了更新,但是http的緩存規則告訴瀏覽器本地緩存的manifest文件還沒過期,這個情況下瀏覽器還是使用原來的manifest文件,所以對於manifest文件最好不要設置緩存。
-
瀏覽器在下載manifest文件中的資源的時候,它會一次性下載所有資源,如果某個資源由於某種原因下載失敗,那麽這次的所有更新就算是失敗的,瀏覽器還是會使用原來的資源。
-
在更新了資源之後,新的資源需要到下次再打開app才會生效,如果需要資源馬上就能生效,那麽可以使用
window.applicationCache.swapCache()
方法來使之生效,出現這種現象的原因是瀏覽器會先使用離線資源加載頁面,然後再去檢查manifest是否有更新,所以需要到下次打開頁面才能生效。
html5離線存儲