H5離線儲存

2022-09-11 09:03:11 字數 1892 閱讀 6082

首先,我們建立乙個html檔案,類似這樣:

network,fallback,其中network和fallback為可選項,而第一行cache manifest為固定格式,必須寫在前面。

cache:(必須)

標識出哪些檔案需要快取,可以是相對路徑也可以是絕對路徑。例如:aa.css,

network:(可選)

這一部分是要繞過快取直接讀取的檔案,可以使用萬用字元*,,也就是說除了上面的cache檔案,剩下的檔案每次都要重新拉取。例如*,login.php。

fallback:(可選)

指定了乙個後備頁面,當資源無法訪問時,瀏覽器會使用該頁面。該段落的每條記錄都列出兩個 uri—第乙個表示資源,第二個表示後備頁面。兩個 uri 都必須使用相對路徑並且與清單檔案同源。可以使用萬用字元。例如*.html  /offline.html。

manifest 檔案需要配置正確的 mime-type,即 "text/cache-manifest"。必須在 web 伺服器上進行配置

檢視console:

可選值匹配常量描述0

未快取1閒置2

檢查中3

4已更新5失效

然後,通過log,我們看到一些檔案已經被快取,我們可以檢視chrome resources來檢視:

證明直接從快取拿去檔案:

瀏覽器發現manifest檔案本身發生變化,便會根據新的manifest檔案去獲取新的資源進行快取。

當manifest檔案列表並沒有變化的時候,我們通常通過修改manifest注釋的方式來改變檔案,從而實現更新。

對於第一種,我們修改一下manifest檔案,把version改為1.4,然後重新整理頁面。

對於第二種方法,我們首先修改一下我們的js,新增乙個監聽事件:

());

完!

h5離線儲存 manifest

1 問題分析 html5提出的乙個新的特性 離線儲存。通過離線儲存,我們可以通過把需要離線儲存在本地的檔案列在乙個manifest配置檔案中,這樣即使在離線的情況下,使用者也可以正常看見網頁。2 核心問題講解 這個 不是很常用 就是告訴大家 以後見到要認識 使用 1 在需要離線快取儲存的頁面 加上 ...

H5離線儲存 manifest

html5之前的網頁,都是無連線,必須聯網才能訪問,這其實也是web的特色,這其實對於pc是時代問題並不大,但到了移動網際網路時代,裝置終端位置不再固定,依賴無線訊號,網路的可靠性變得降低,比如坐在火車上,過了乙個隧道 15分鐘 便無法訪問 這對於web的傷害是很大的。html5便引入了cache ...

h5離線應用

在chorme瀏覽器下,可以訪問 http cache 位址 chrome cache 檢視兩者。需要注意的是,清單上的檔案路徑不能有錯,只要乙個有錯,所以檔案都不會離線儲存。第二步是,在需要離線的網頁的標籤上增加manifest屬性,指向上面的清單檔案。在chorme瀏覽器下,可以按f12開啟除錯...