HTML5 manifest離線緩存

時間 2019-11-22

原文原文鏈接

1、基本概念

離線緩存是HTML5新引入的技術，可以讓你的Web應用程序指定哪些文件能夠緩存在本地，使得你的網絡斷開時依然能夠經過本地的緩存來進行訪問瀏覽。javascript

2、使用方法

1. MIME type 聲明

首先，由於manifest文件必須是一個MIME type爲text/cache-manifest類型的存在。文件後綴名能夠自定義（建議爲.appcache）因此咱們須要如今服務端將.appcache後綴的文件類型聲明爲text/cache-manifest。以apache爲例，咱們須要在httpd.conf中加上：css

AddType text/cache-manifest .appcache

2. 在HTML文件中引入manifest文件

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

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

3. manifest文件語法

CACHE MANIFEST
# 上面這行是必須的

# 這是一行註釋
# 在這個文件中的任何地方均可以添加
# 它們所有都會被忽略
  # 在註釋以前能夠有空格
  # 但必須是在單行前

# 空行也會被忽略

# 這些列在最開始的文件都是須要被緩存的
# 或者是那些列在"CACHE:"裏的， "CACHE"頭必須寫在這些文件以前，如同
# 下面寫好的那樣
images/sound-icon.png
images/background.png
# 注意，每一個文件必須單獨一行

# 在線白名單中出現的這個文件，它不會被緩存，而且，
# 對該文件的引用，將繞過緩存，老是會
# 從網絡中獲取目標（或在用戶離線時，嘗試從網路上獲取）
NETWORK:
comm.cgi

# 這是另外一塊要緩存的文件，此次只有一個css文件
CACHE:
style/default.css

咱們也能夠書寫成這樣：java

CACHE MANIFEST
#version 1.0
CACHE:
style/default.css
images/sound-icon.png
images/background.png
NETWORK:
*

CACHE MANIFEST：這個是必須的，而且必定要寫在manifest文件開頭
CACHE：緩存清單列表，此處列出的爲須要進行離線緩存的資源文件
NETWORK: 白名單列表，須要與服務端進行交互獲取的資源文件，此處必須列出除緩存清單列表之外全部的資源地址（可使用通配符*星號代替），不然沒有列出的資源文件將加載失敗

引入manifest的頁面，即便沒有被列入緩存清單中，仍然會被用戶代理緩存。而且沒法經過白名單列表去除。chrome

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

開啓離線緩存後，咱們能夠在chrome中打開f12來看看資源加載有啥區別

能夠看出，使用離線緩存後的資源，資源請求的狀態碼都變爲200，而且在size欄中都被標明爲(form cache)，加載速度也是顯而易見的。後端

4. 緩存如何更新？

資源被離線緩存後，不管咱們在後端如何更改資源文件，客戶端都不會拉取到修改過的文件。瀏覽器

原來，只有當manifest文件被更新後（修改文件任何地方，包括註釋等），客戶端纔會更新離線緩存文件，而且每次都會更新所有的緩存文件，包括沒有被修改的資源文件，但通常這些文件都會走304的緩存策略。緩存

另外，在服務端修改manifest文件後，客戶端第一次訪問頁面須要再刷新一次才能獲取最新的資源。由於對於瀏覽器來講,manifest的加載是要晚於其餘資源的. 這就致使check manifest的過程是滯後的。發現manifest改變，全部瀏覽器的實現都是緊隨這作靜默更新資源，以保證下次pv,應用到更新。（這一點很蛋疼，但仍是有解決辦法，請繼續往下看）。網絡

5. 離線緩存對象和事件處理

在javascript中咱們能夠經過window.applicationCache來訪問緩存對象，對象中包含了一個status屬性以及若干的待監聽的事件處理器。

其中status屬性表明的是當前離線應用的狀態，它可能的值爲：

UNCACHED (0)：未啓用離線應用

IDLE (1)：已開啓離線應用，但本地緩存的資源是最新的，而且未標記爲廢棄資源

CHECKING (2)：當前更新緩存的狀態爲「檢查中」

DOWNLOADING (3)：當前更新緩存的狀態爲「下載資源中」

UPDATEREADY (4)：當前更新緩存的狀態爲「更新完畢」

OBSOLETE (5)：已開啓離線應用，但緩存資源都已標記爲廢棄

離線緩存事件：

checking：在第一次下載manifest文件時，或者檢查是否須要更新時觸發

noupdate：manifest文件未修改，不須要下載新的緩存文件時觸發

downloading：準備更新緩存以前，或者第一次下載資源以前觸發

progress：下載資源時觸發，每下載一個資源都會觸發一次

cached：頁面首次啓用離線緩存，而且離線緩存下載完畢時觸發

updateready：資源更新完畢時觸發

obsolete：加載manifest文件時遇到401或404錯誤時觸發

errorEvent加載manifest文件時遇到401或404錯誤時觸發

這樣，咱們就能夠經過updateready事件來讓離線緩存更新後自動刷新頁面了，雖然仍是比較挫：

applicationCache.addEventListener(‘updateready’, function(){
       location.href=」test.html」;
}, false);

6. 離線緩存的下線

要將離線緩存下線，咱們只須要將服務端的manifest文件刪除便可，同時也要將HTML中的 manifest="manifest.appcache" 刪除（不刪也能夠，會在console控制檯報錯，但不會影響頁面訪問），刪除後用戶再第一次訪問仍是原來的緩存頁面，還須要再刷新一次。。。蛋疼吧。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。