H5應用程序緩存 - Cache manifest

一、作用

離線瀏覽 - 根據文件規則把資源緩存在本地,脫機依然能夠訪問資源,聯網會直接使用緩存在本地的文件。優化加載速度,節約服務器資源。

二、適用場景

正如 manifest 英譯的名字:離線應用程序緩存,這項功能是設計給會有離線場景的應用來使用,例如:需要離線使用的手機APP/H5,亦或是PC端的純靜態頁面。

三、問題

1.服務器資源更新後顯示滯後需要多刷新一次頁面

  1. 首次在載入頁面時,瀏覽器會判斷是否引入了 manifest,若檢測到引入,則下載並按文件規則緩存資源。
  2. 再次載入頁面時,便會根據 manifest 中規定的緩存文件使用本地緩存而不是請求服務器資源。
  3. 當 manifest 文件更新時,頁面加載已經進行,但是緩存更新尚未完成,便會先使用舊 manifest 所緩存的文件,同時瀏覽器會將新的 manifest 文件裏的緩存文件下載下來,若想看到最新的靜態資源需要刷新下頁面重新加載一次。

2.全量加載

當 manifest 文件更新時,所有的資源都要全部被下載一次,並且其中一個出現異常會導致整個 manifest 運行異常。

3.W3C標準及瀏覽器支持

作爲 H5 的新屬性,初衷是用來構造離線應用的,緩存網站資源的話原本瀏覽器的緩存機制(304)已經很好了,沒必要再使用 manifest 做緩存;實際上因爲使用反響並不好,W3C正在廢棄 manifest。

四、使用方法

首先在標籤 <html> 中指定 manifest 配置文件。

<html manifest="manifest.appcache">

配置文件 manifest.appcache

CACHE MANIFEST
# 井號備註,這邊可以放版本更新時間,修改備註算更新 manifest 文件
CACHE:
# 首次下載 CACHE 後列出來的文件後緩存到本地。
/favicon.ico
/main.css

NETWORK:
# NETWORK 下的文件不可被緩存,必須要與服務器連接。
login.php

FALLBACK:
# 一行放兩個路徑,第一個是訪問資源,第二個是替補;當無法訪問前一個資源時,用後一個資源代替之。
/cat/ /404.html

注意

manifest 會把當前頁面緩存下來,所以若想更新當前頁,只能先更新 manifest 文件。

五、總結

manifest 適用於需要離線運行的應用(定時器,計算器,閱讀器等工具);而需要經常發佈頻繁更新的網站,這種離線緩存機制並不適合。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章