一、作用
離線瀏覽 - 根據(jù)文件規(guī)則把資源緩存在本地,脫機(jī)依然能夠訪問資源,聯(lián)網(wǎng)會直接使用緩存在本地的文件。優(yōu)化加載速度,節(jié)約服務(wù)器資源。
二、適用場景
正如 manifest 英譯的名字:離線應(yīng)用程序緩存,這項(xiàng)功能是設(shè)計(jì)給會有離線場景的應(yīng)用來使用,例如:需要離線使用的手機(jī)APP/H5,亦或是PC端的純靜態(tài)頁面。
三、問題
1.服務(wù)器資源更新后顯示滯后需要多刷新一次頁面
- 首次在載入頁面時,瀏覽器會判斷是否引入了 manifest,若檢測到引入,則下載并按文件規(guī)則緩存資源。
- 再次載入頁面時,便會根據(jù) manifest 中規(guī)定的緩存文件使用本地緩存而不是請求服務(wù)器資源。
- 當(dāng) manifest 文件更新時,頁面加載已經(jīng)進(jìn)行,但是緩存更新尚未完成,便會先使用舊 manifest 所緩存的文件,同時瀏覽器會將新的 manifest 文件里的緩存文件下載下來,若想看到最新的靜態(tài)資源需要刷新下頁面重新加載一次。
2.全量加載
當(dāng) manifest 文件更新時,所有的資源都要全部被下載一次,并且其中一個出現(xiàn)異常會導(dǎo)致整個 manifest 運(yùn)行異常。
3.W3C標(biāo)準(zhǔn)及瀏覽器支持
作為 H5 的新屬性,初衷是用來構(gòu)造離線應(yīng)用的,緩存網(wǎng)站資源的話原本瀏覽器的緩存機(jī)制(304)已經(jīng)很好了,沒必要再使用 manifest 做緩存;實(shí)際上因?yàn)槭褂梅错懖⒉缓?,W3C正在廢棄 manifest。
四、使用方法
首先在標(biāo)簽 <html> 中指定 manifest 配置文件。
<html manifest="manifest.appcache">
配置文件 manifest.appcache。
CACHE MANIFEST
# 井號備注,這邊可以放版本更新時間,修改備注算更新 manifest 文件
CACHE:
# 首次下載 CACHE 后列出來的文件后緩存到本地。
/favicon.ico
/main.css
NETWORK:
# NETWORK 下的文件不可被緩存,必須要與服務(wù)器連接。
login.php
FALLBACK:
# 一行放兩個路徑,第一個是訪問資源,第二個是替補(bǔ);當(dāng)無法訪問前一個資源時,用后一個資源代替之。
/cat/ /404.html
注意
manifest 會把當(dāng)前頁面緩存下來,所以若想更新當(dāng)前頁,只能先更新 manifest 文件。
五、總結(jié)
manifest 適用于需要離線運(yùn)行的應(yīng)用(定時器,計(jì)算器,閱讀器等工具);而需要經(jīng)常發(fā)布頻繁更新的網(wǎng)站,這種離線緩存機(jī)制并不適合。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。