HTML5的離線儲存


在用戶沒有與因特網連接時,可以正常訪問站點或應用,在用戶與因特網連接時,更新用戶機器上的緩存文件。
        原理:HTML5的離線存儲是基於一個新建的.appcache文件的緩存機制(不是存儲技術),通過這個文件上的解析清單離線存儲資源,這些資源就會像cookie一樣被存儲了下來。之后當網絡在處於離線狀態下時,瀏覽器會通過被離線存儲的數據進行頁面展示。


        如何使用:
        1、頁面頭部像下面一樣加入一個manifest的屬性;

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

 


        2、在cache.manifest文件的編寫離線存儲的資源;
          

 CACHE MANIFEST
            #v0.11
            CACHE:
            js/app.js
            css/style.css
            NETWORK:
            resourse/logo.png
            FALLBACK:
            / /offline.html

 


        3、在離線狀態時,操作window.applicationCache進行需求實現。

瀏覽器怎么解析manifest

那么瀏覽器是怎么對離線的資源進行管理和加載的呢?這里需要分兩種情況來討論。

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

  • 離線的情況下,瀏覽器就直接使用離線存儲的資源。

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

  • 如果服務器對離線的資源進行了更新,那么必須更新manifest文件之后這些資源才能被瀏覽器重新下載,如果只是更新了資源而沒有更新manifest文件的話,瀏覽器並不會重新下載資源,也就是說還是使用原來離線存儲的資源。

  • 對於manifest文件進行緩存的時候需要十分小心,因為可能出現一種情況就是你對manifest文件進行了更新,但是http的緩存 規則告訴瀏覽器本地緩存的manifest文件還沒過期,這個情況下瀏覽器還是使用原來的manifest文件,所以對於manifest文件最好不要設 置緩存。

  • 瀏覽器在下載manifest文件中的資源的時候,它會一次性下載所有資源,如果某個資源由於某種原因下載失敗,那么這次的所有更新就算是失敗的,瀏覽器還是會使用原來的資源。

  • 在更新了資源之后,新的資源需要到下次再打開app才會生效,如果需要資源馬上就能生效,那么可以使用window.applicationCache.swapCache()方法來使之生效,出現這種現象的原因是瀏覽器會先使用離線資源加載頁面,然后再去檢查manifest是否有更新,所以需要到下次打開頁面才能生效。



    詳細的使用請參考:[有趣的HTML5:離線存儲](http://segmentfault.com/a/1190000000732617)HTML5的離線儲存


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM