h5離線緩存


  離線緩存:application cache

  什么是離線緩存:

    離線緩存可以將站點的一些文件緩存到本地,它是瀏覽器自己的一種機制,將需要的文件緩存下來,以便后期即使沒鏈接網絡,被緩存的頁面也可以展示

  離線緩存的優勢:

    提高用戶的訪問速度,節省流量;

  如何實現離線緩存

    1.在需要緩存文件的根節點 html 上添加 manifest 屬性(屬性值是以   .appcache  為后綴的文件)   案例  (<html manifest="a.appcache">  ...   </html>  )

    2.必須在同級目錄下添加以  .appcache為后綴的文件

    3.    .appcache文件的內容

    在 .appcache 其實本質上也屬於txt文件   所以 # 代表注釋的意思

    CACHE MANIFEST

    # 1.0  版本號  (這個注釋是給 開發者看的,代表了第幾個版本)

    CACHE:

      在這里書寫需要被緩存的文件,既可以是相對路徑,也可以使用絕對路徑

    NETWORK:

      *  指的是不會被緩存的文件,   * 代表 上面的除了上面的緩存文件之外的其他所有都不會被緩存

    FALLBACK:

      如果無法建立英特網請求(如404),而打開的文件  

       (在/theme.css 前面加上 CACHE 就更好了)

  在服務端的處理(服務端有可能無法解析此文件),需要添加他的mime類型

  不然在控制台 會報錯: failed to parse manifest  (意思是:解析manifest文件失敗)

  原因是服務端,沒有響應這個文件的mime類型

  在服務器上添加 .appcache文件的mime類型

  以phpstudy為例

    phpstudy-->apache-->conf-->mime.types

  在最后一行添加mime類型: text/cache-manifest         .appcache   (還有添加后綴名)

  如圖

  

 

  如何查看緩存文件 

    F12-->檢查元素:application---->application cache 中 source中 查看 ,但隨着瀏覽器的升級,現在不能直接查看了,因為他會引發上下文的安全,及耗資源

  並且,同級目錄下不能出現 以 .txt 結尾的文件,否則緩存功能失效

  

  在客戶端插在緩存文件的位置;

    在瀏覽器的地址欄輸入 chrome://version

    然后在個人資料路徑一欄便可找到

    

 


免責聲明!

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



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