當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

h5离线缓存

發布時間：2025/5/22 编程问答 15 豆豆

生活随笔收集整理的這篇文章主要介紹了 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

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

轉載于:https://www.cnblogs.com/shangjun6/p/10911836.html

以上是生活随笔為你收集整理的h5离线缓存的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。