離線快取 manifest 的設定

2021-08-19 19:02:39 字數 1623 閱讀 6438

雖然 manifest 已經從web標準中移除,但是還是來看看manifest的實現吧;

這個需要伺服器的支援,也就是需要設定mime,

我在本地的wamp 環境下進行設定的,對應的是第四個,也就是下面最後乙個

addtype text/cache-manifest .manifest

伺服器上可以支援之後:

乙個主頁(預設),乙個,乙個juqery.js檔案;

cache manifest

# version 0.1

# 直接快取的檔案

cache:

index.html

he.png

jquery.js

再看看主頁需要新增的內容:在頭部新增快取的檔案 如下就可以了,

需要伺服器支援,設定mime:

<

p>manifest 測試檔案p>

<

imgsrc=

"he.png"

alt=

"">

<

imgsrc=

"he.png"

alt=

"">

<

imgsrc=

"he.png"

alt=

"">

<

imgsrc=

"he.png"

alt=

"">

<

imgsrc=

"he.png"

alt=

"">

<

imgsrc=

"he.png"

alt=

"">

<

imgsrc=

"he.png"

alt=

"">

<

imgsrc=

"he.png"

alt=

"">

<

script> $(

function()

); script>

body>

html>

實現上面的內容之後,我的這個小測試在離線的情況下,及時重新整理,也是可以正常顯示的,

當再一次訪問的時候,速度是極快的,絲毫沒有卡頓等待,這就是manifest的好處;

離線快取manifest

1 在html檔案中的html標籤中加入如下屬性 2 demo.manifest檔案包含內容如下 cache manifest v1.0.0 需要快取的檔案 cache a.js b.css 不需要快取的檔案 network 無法訪問頁面 fallback 404.html 3 manifest檔案...

manifest離線快取技術

author 果果 data 2020.04.25 17 06 html屬性 manifest定義 manifest 屬性規定文件的快取 manifest 的位置。html5 引入了應用程式快取,這意味著 web 應用程式可以被快取,然後在無網際網路連線的時候進行訪問。應用程式快取使得應用程式有三個...

manifest離線快取機制

總結下 1 頁面的首次載入,獲取manifest在內的所有檔案,根據manifest檔案的內容,該快取的快取 2,第二次載入,先從快取中取出manifest檔案,裡面列出的快取檔案,直接從快取讀取,然後去請求網路的manifest和其他檔案,若新的mannifest檔案版本和舊的一樣,則沒有變動。若...