HTML5應用快取機制

2021-07-24 12:35:26 字數 1724 閱讀 7019

用360瀏覽器的使用者對這張圖應該都是耳熟能詳了吧,沒錯,當網路不通暢時使用360瀏覽器,便會有這張圖彈出來。為什麼沒有網路還能彈出這一副畫面呢?這就關乎html5的應用快取機制了。

那什麼是應用快取機制呢?

怎麼使用應用快取?

首先,我們需要新建乙個自定義的清單檔案(manifest file),在這裡我先將其命名為"cache_manifest"

然後其中的具體**格式見下:

cache manifest  

# version1

cache:

# 這裡放直接快取的檔案

network:

fallback:

# 這裡放備份檔案

<1>首先在開頭必須宣告cache manifest這一行**(必需)

<2>可用「#」符號進行注釋

<3>具體內容可分為三塊:

<5>怎麼使用上面快取清單檔案(manifest file)呢?只要在當前的html的manifest屬性裡附加上你編寫的快取

清單檔案就可以啦,

比如我寫的就是:

下面我具體演示一下:這裡有兩張在雲端的,第一張位址是在此稱之為男子西裝圖吧)

第二張圖位址是:在此稱之為黃衣女人圖吧)

我的清單快取檔名稱為cache_manifest

cache manifest  

# version1

cache:

network:

fallback:

# 這裡放備份檔案

html頁面**如下:

當我開啟飛行模式,離線狀態開啟時,demo如下,「男人西裝圖」仍然能正常顯示,說明通過快取清單檔案它已經被成功快取起來了,而「黃衣女人圖」則因為被設定為不快取所以顯示為一張預設的了

HTML5 應用快取

html5 引入了應用程式快取,這意味著 web 應用可進行快取,並可在沒有網際網路連線時進行訪問。應用程式快取為應用帶來三個優勢 新增快取 manifest 檔案可分為三個部分 network 在此標題下列出的檔案需要與伺服器的連線,且不會被快取 fallback 在此標題下列出的檔案規定當頁面無...

HTML5之應用快取

html書寫 html manifest檔案的書寫方式 cache manifest cache theme.css logo.gif main.js network xx fallback x.css tesr.css 原檔案 替代檔案 當原檔案不能用時使用替代檔案 客戶端快取的更新 只有修改ma...

HTML5的應用快取

使用應用快取可以得到以下益處 用法 只需要在你的頁面頭部加上乙個 manifest 的屬性就可以了。cache.manifest檔案的書寫方式 cache manifest v1 2011 08 14 這是乙個完整的頁面 index.html cache.html style.css image1....