manifest離線緩存

1.起源:

? ? ? ? ? ? ? H5之前,所有網頁都必須聯網才能訪問

? ? ? ? ? ? ? PC端沒問題,在移動端網絡的可靠性變低。(過山洞、走地下通道、去郊區、連不上網,什么都干不了)

2.manifest是什么?

manifest是一個同名后綴為manifest的文件,在文件中定義那些需要緩存的文件,支持manifest的瀏覽器,將會按照manifest文件的規則進行保存數據,從而在沒有網絡的情況下,也可以訪問

當第一次正確配置app cache后,再次訪問該應用時,瀏覽器?會首先檢查manifest是否有變動,如果有變動,則把相應的變化更更新下來,同時改變瀏覽器?的app cache,如果沒有變動,就會直接把app cache的資源返回

3.特點:

離線瀏覽 ?—— ?用戶可以在離線狀態瀏覽?網站舊數據

更快的速度 ?—— ?因為數據存儲在本地,所以速度會更快

減輕服務器的負載 ?—— ?瀏覽器只會下載在服務器上發生改變的資源

4.兼容情況:

所有主流瀏覽器都支持離線緩存,除了了個性的IE

5.使用

a.在html標簽中增加一個manifest屬性,用來指定當前頁面的manifest文件

b.創建一個和html同名的manifest文件,然后給index.html文件添加屬性 ? ? ? ? <html manifest="index.manifest">

c.html文件設置完成,后面去操作manifest文件

6.manifest文件的編寫


7.如何更新緩存

a.更新manifest文件

? ? ? ? 給manifest添加或刪除文件,都可以更新緩存

? ? ? ? 如果我們更改了了js,而沒有新增或刪除,

? ? ? ? 前面例子中的版本號,可以很好的用來更新manifest文件

b.通過javascript操作

? ? ? ? HTML5中引入JS操作離線緩存的方法

? ? ? ? window.applicationCache.update();

? ? ? ?瀏覽器已放棄支持該方法

c.清除瀏覽?緩存

? ? ? ? 如果用戶清除了瀏覽?緩存,會重新下載文件


8.使用注意事項

(1)瀏覽器對緩存數據的容量量限制可能不太一樣,某些瀏覽?限制是每個站點5MB

(2)如果manifest文件,或者內部列列舉的某一個文件不能正常下載,

整個更更新過程將失敗,繼續使用老的緩存

(3)引用manifest的html必須與manifest文件同源,在同一個域下

(4)FALLBACK中的資源必須和manifest文件同源

(5)當一個資源被緩存后,該瀏覽?直接請求整個絕對路徑也會訪問緩存中的資源

(6)站點的其它頁面即時沒有manifest屬性,請求的資源如果在緩存中也從緩存中訪問

(7)當manifest文件發生改變的時,資源請求本身也會觸發更更新

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 1、起源 H5之前,所有的網頁都必須聯網才能訪問。PC端沒問題,在移動端網絡的可靠性變低 2、manifest是什...
    方豆兒閱讀 976評論 0 2
  • **干什么用的?**離線緩存為的是第一次請求后,根據manifest文件進行本地緩存,并且在下一次請求后進行展示(...
    高高3575閱讀 3,574評論 1 12
  • 轉載:H5緩存機制淺析-移動端Web加載性能優化【干貨】 作者:賀輝超,騰訊游戲平臺與社區產品部 高級工程師 目錄...
    meng_philip123閱讀 11,567評論 6 48
  • 起源 大部分的網頁,必須聯網才能訪問,這其實也是web的特色,但對于現在的移動互聯網時代,設備終端位置不再固定,依...
    白水螺絲閱讀 2,596評論 0 4
  • Html5 引入了應用程序緩存,這意味著web應用可以進行緩存,并且可以在沒有網絡連接的時候進行訪問。1.1 什么...
    Victor細節閱讀 4,061評論 0 0