H5使用Manifest離線緩存

1. MIME type 聲明

首先,因爲manifest文件必須是一個MIME type爲text/cache-manifest類型的存在。文件後綴名可以自定義(建議爲.appcache)所以我們需要現在服務端將.appcache後綴的文件類型聲明爲text/cache-manifest以apache爲例,我們需要在httpd.conf中加上:

AddType text/cache-manifest .appcache

2. HTML文件中引入manifest文件

<!-- clock.html -->
<!DOCTYPE html>
<html manifest="clock.appcache">

其中manifest文件的後綴名必須爲.appcache,並且和引入該manifest的頁面同源

3. manifest文件語法

CACHE MANIFEST
#version 1.0
CACHE:
style/default.css
images/sound-icon.png
images/background.png
NETWORK:
*
  • CACHE MANIFEST這個是必須的,並且一定要寫在manifest文件開頭
  • CACHE緩存清單列表,此處列出的爲需要進行離線緩存的資源文件
  • NETWORK: 白名單列表,需要與服務端進行交互獲取的資源文件,此處必須列出除緩存清單列表以外所有的資源地址(可以使用通配符*星號代替),否則沒有列出的資源文件將加載失敗

引入manifest的頁面,即使沒有被列入緩存清單中,仍然會被用戶代理緩存。並且無法通過白名單列表去除。

緩存清單的文件列表可以使用絕對路徑或絕對URL地址。

4. 緩存如何更新

資源被離線緩存後,無論我們在後端如何更改資源文件,客戶端都不會拉取到修改過的文件。

原來,只有當manifest文件被更新後(修改文件任何地方,包括註釋等),客戶端纔會更新離線緩存文件,並且每次都會更新全部的緩存文件,包括沒有被修改的資源文件,但一般這些文件都會走304的緩存策略。

另外,在服務端修改manifest文件後,客戶端第一次訪問頁面需要再刷新一次才能獲取最新的資源。因爲對於瀏覽器來說,manifest的加載是要晚於其他資源的. 這就導致check manifest的過程是滯後的。發現manifest改變,所有瀏覽器的實現都是緊隨這做靜默更新資源,以保證下次pv,應用到更新。

發佈了145 篇原創文章 · 獲贊 16 · 訪問量 16萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章