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

编程问答

h5离线应用

發布時間：2023/12/10 编程问答 39 豆豆

生活随笔收集整理的這篇文章主要介紹了 h5离线应用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

h5離線應用

所謂離線應用，就是斷網之后還可以運行的應用。h5提供了application cache，可以保存網頁的離線數據。CSDN的Markdown編輯器就運用了application cache，在沒有網絡的情況下，一樣可以正常使用，這就是一個很好的離線應用。

application cache和http緩存有時候很相似，http緩存也可以把瀏覽過的網頁緩存下來，在斷網情況下也可以打開。但是http緩存是會過期的，而application cache是永久的。http緩存像是一個快照，只是保存了網頁的某個狀態，而離線應用是實實在在的在運行。當網頁是一個“單頁應用”時更能體現兩者的區別。

在chorme瀏覽器下，可以訪問：

application cache 地址: chrome://appcache-internals/
http cache 地址 : chrome://cache/

查看兩者。

實現一個h5離線應用

首先，需要一個清單文件，指出哪些文件是需要離線存儲的。文件的名稱和后綴都是可以是隨意的，如下面這個文件可以命名為：appcache.manifest，如果服務器識別不了這樣的后綴，則需要將這種后綴配置到服務器

CACHE MANIFEST CACHE: common.css common.js icon.jpgNETWORK: imgs/good1.jpg imgs/good2.jpgFALLBACK: good1.jpg offline/imgs/good1.jpg

CACHE MANIFEST : 清單文件的第一行必須是這個，表示這是一個清單文件
CACHE: 后面跟著需要離線的文件
NETWORK: 后面跟著的文件表示是需要從網絡上獲取的
FALLBACK: 這個標簽是可選的，后面每一行有兩個文件，表示當第一個文件訪問不了時，使用第二個文件。

需要注意的是，清單上的文件路徑不能有錯，只要一個有錯，所以文件都不會離線保存。

第二步是，在需要離線的網頁的<html>標簽上增加manifest屬性，指向上面的清單文件。

每一個需要離線的網頁都需要配置一個manifest屬性，從這也可以看出，h5的application cache更適合“單頁應用”，而不是網站。

就這樣，一個離線應用就完成了，當你第一次打開帶有manifest屬性的網頁時，瀏覽器就會把離線文件下載下來，以后每次運行，都直接從緩存里拿這些文件。

在chorme瀏覽器下，可以按F12打開調試工具，選擇“網絡”，設成“offline”來模擬斷網：

要觀察到效果，禁用掉http緩存更好。

更新離線文件

自動更新

離線文件一旦緩存下來，瀏覽器以后都將使用離線文件，不會再向服務器請求該文件，也不知道服務器端的文件是否更新。但是，瀏覽器會在每次打開網頁的時候，檢查manifest文件是否是最新，所以只要manifest文件發生變化時，瀏覽器就會更新一遍離線文件，這便是自動更新。
手動更新

可以通過window.applicationCache對象來手動更新離線緩存。

參考

應用緩存初級使用指南

九種瀏覽器端緩存機制知多少

使用HTTP緩存

總結

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

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

离线