閱讀(2.1k) 書(shū)簽贊(0) 我要糾錯(cuò)

HTML5 離線(xiàn)緩存

2018-06-16 16:42 更新

在搞Painter時(shí)有涉及到HTML5離線(xiàn)緩存，最近想把其應(yīng)用到其他項(xiàng)目中，發(fā)現(xiàn)自己已經(jīng)忘得差不多了，所以寫(xiě)下本文，給自己做個(gè)記錄。

本文將介紹離線(xiàn)緩存的方方面面，并在最后會(huì)介紹一下關(guān)于自動(dòng)化的問(wèn)題。

起源
什么是Cache Manifest
Manifest的特點(diǎn)
瀏覽器支持情況
如何使用
Manifest文件
如何更新緩存
注意事項(xiàng)
自動(dòng)化工具
參考資料

起源

html5之前的網(wǎng)頁(yè)，都是無(wú)連接，必須聯(lián)網(wǎng)才能訪(fǎng)問(wèn)，這其實(shí)也是web的特色，這其實(shí)對(duì)于PC是時(shí)代問(wèn)題并不大，但到了移動(dòng)互聯(lián)網(wǎng)時(shí)代，設(shè)備終端位置不再固定，依賴(lài)無(wú)線(xiàn)信號(hào)，網(wǎng)絡(luò)的可靠性變得降低，比如坐在火車(chē)上，過(guò)了一個(gè)隧道（15分鐘），便無(wú)法訪(fǎng)問(wèn)網(wǎng)站，這對(duì)于web的傷害是很大的，比如對(duì)于《ecmascript合集》這樣的為閱讀而生的頁(yè)面。

html5便引入了cache manifest 文件。那么什么是cache manifest呢，接下來(lái)會(huì)講到。

什么是Cache Manifest

首先manifest是一個(gè)后綴名為minifest的文件，在文件中定義那些需要緩存的文件，支持manifest的瀏覽器，會(huì)將按照manifest文件的規(guī)則，像文件保存在本地，從而在沒(méi)有網(wǎng)絡(luò)鏈接的情況下，也能訪(fǎng)問(wèn)頁(yè)面。

當(dāng)我們第一次正確配置app cache后，當(dāng)我們?cè)俅卧L(fǎng)問(wèn)該應(yīng)用時(shí)，瀏覽器會(huì)首先檢查manifest文件是否有變動(dòng)，如果有變動(dòng)就會(huì)把相應(yīng)的變得跟新下來(lái)，同時(shí)改變?yōu)g覽器里面的app cache，如果沒(méi)有變動(dòng)，就會(huì)直接把a(bǔ)pp cache的資源返回，基本流程是這樣的。

Manifest的特點(diǎn)

離線(xiàn)瀏覽: 用戶(hù)可以在離線(xiàn)狀態(tài)下瀏覽網(wǎng)站內(nèi)容。
更快的速度: 因?yàn)閿?shù)據(jù)被存儲(chǔ)在本地，所以速度會(huì)更快.
減輕服務(wù)器的負(fù)載: 瀏覽器只會(huì)下載在服務(wù)器上發(fā)生改變的資源。

瀏覽器支持情況

所有主流瀏覽器均支持應(yīng)用程序緩存，除了 Internet Explorer。caniuse給出的答案如下圖所示。

如何使用

html新增了一個(gè)manifest屬性，可以用來(lái)指定當(dāng)前頁(yè)面的manifest文件。

創(chuàng)建一個(gè)和html同名的manifest文件，比如頁(yè)面為index.html，那么可以建一個(gè)index.manifest的文件，然后給index.html的html標(biāo)簽添加如下屬性即可：

<html lang="en" manifest="index.manifest">

Manifest文件

接下來(lái)詳細(xì)說(shuō)說(shuō)manifest的細(xì)節(jié)，一個(gè)典型的manifest文件代碼結(jié)構(gòu)像下面這樣：

CACHE MANIFEST
#version 1.3

CACHE:
    test.css

NETWORK:
	*

manifest文件，基本格式為三段： CACHE， NETWORK，與 FALLBACK，其中NETWORK和FALLBACK為可選項(xiàng)。

而第一行CACHE MANIFEST為固定格式，必須寫(xiě)在前面。

以#號(hào)開(kāi)頭的是注釋?zhuān)话銜?huì)在第二行寫(xiě)個(gè)版本號(hào)，用來(lái)在緩存的文件更新時(shí)，更改manifest的作用，可以是版本號(hào)，時(shí)間戳或者md5碼等等。

CACHE:（必須）

標(biāo)識(shí)出哪些文件需要緩存，可以是相對(duì)路徑也可以是絕對(duì)路徑。

a.css
http://yanhaijing.com/a.css

NETWORK:（可選）

這一部分是要繞過(guò)緩存直接讀取的文件，可以使用通配符＊。

下面的代碼 “l(fā)ogin.asp” 永遠(yuǎn)不會(huì)被緩存，且離線(xiàn)時(shí)是不可用的：

NETWORK:
login.asp

可以使用星號(hào)來(lái)指示所有其他資源/文件都需要因特網(wǎng)連接：

NETWORK:
*

FALLBACK:（可選）

指定了一個(gè)后備頁(yè)面，當(dāng)資源無(wú)法訪(fǎng)問(wèn)時(shí)，瀏覽器會(huì)使用該頁(yè)面。該段落的每條記錄都列出兩個(gè) URI—第一個(gè)表示資源，第二個(gè)表示后備頁(yè)面。兩個(gè) URI 都必須使用相對(duì)路徑并且與清單文件同源?？梢允褂猛ㄅ浞?。

下面的例子中，如果無(wú)法建立因特網(wǎng)連接，則用 “404.html” 替代 /html5/ 目錄中的所有文件。

FALLBACK:
/html5/ /404.html

下面的例子中，則用 “404.html” 替代所有文件。

FALLBACK:
*.html /404.html

如何更新緩存

如下三種方式，可以更新緩存：

更新manifest文件
通過(guò)javascript操作
清除瀏覽器緩存

給manifest添加或刪除文件，都可更新緩存，如果我們更改了js，而沒(méi)有新增或刪除，前面例子中注釋中的版本號(hào)，可以很好的用來(lái)更新manifest文件。

html5中引入了js操作離線(xiàn)緩存的方法，下面的js可以手動(dòng)更新本地緩存。

window.applicationCache.update();

如果用戶(hù)清除了瀏覽器緩存（手動(dòng)或用其他一些工具）都會(huì)重新下載文件。

注意事項(xiàng)

瀏覽器對(duì)緩存數(shù)據(jù)的容量限制可能不太一樣（某些瀏覽器設(shè)置的限制是每個(gè)站點(diǎn) 5MB）。
如果manifest文件，或者內(nèi)部列舉的某一個(gè)文件不能正常下載，整個(gè)更新過(guò)程都將失敗，瀏覽器繼續(xù)全部使用老的緩存。
引用manifest的html必須與manifest文件同源，在同一個(gè)域下。
FALLBACK中的資源必須和manifest文件同源。
當(dāng)一個(gè)資源被緩存后，該瀏覽器直接請(qǐng)求這個(gè)絕對(duì)路徑也會(huì)訪(fǎng)問(wèn)緩存中的資源。
站點(diǎn)中的其他頁(yè)面即使沒(méi)有設(shè)置manifest屬性，請(qǐng)求的資源如果在緩存中也從緩存中訪(fǎng)問(wèn)。
當(dāng)manifest文件發(fā)生改變時(shí)，資源請(qǐng)求本身也會(huì)觸發(fā)更新。

自動(dòng)化工具

manifest文件中的cache部分不能使用通配符，必須手動(dòng)指定，這實(shí)在太讓人不可理解，文件一多，就成了體力活了，這里介紹的 grunt-manifest能自動(dòng)生成manifest文件的目的。grunt-manifest依賴(lài)grunt，grunt是一個(gè)自動(dòng)化構(gòu)建工具，如果你不知道grunt，請(qǐng)移步這里。

如下的命令可以安裝grunt-manifest，并加入到依賴(lài)文件。

npm install grunt-manifest --save-dev

如下的代碼，可以在grunt中載入grunt-manifest，然后便可使用。

grunt.loadNpmTasks('grunt-manifest');

使用grunt-manifest的一個(gè)典型的配置文件如下所示：

grunt.initConfig({
  manifest: {
    generate: {
      options: {
        basePath: "../",
        cache: ["js/app.js", "css/style.css"]
        network: ["http://*", "https://*"],
        fallback: ["/ /offline.html"],
        exclude: ["js/jquery.min.js"],
        preferOnline: true,
        verbose: true,
        timestamp: true
      },
      src: [
            "some_files/*.html",
          "js/*.min.js",
          "css/*.css"
      ],
      dest: "index.manifest"
    }
  }
});

其中options定義生成manifest的一些自定義參數(shù)，src是要生成的文件，dest是輸出文件。

options下有很多參數(shù)，主要參數(shù)如下：

basePath 設(shè)置出入文件的根目錄
cache 手動(dòng)添加緩存文件
network 手動(dòng)添加網(wǎng)絡(luò)文件
fallback 手動(dòng)添加后備文件
exclude 設(shè)置不添加到cache的文件
verbose 是否添加版權(quán)信息
timestamp 是否添加時(shí)間戳

這里有basejs的配置文件和生成的manifest文件的例子。

以上內(nèi)容是否對(duì)您有幫助：

← 正確使用HTML title屬性

HTML5視頻的那些事兒 →

寫(xiě)筆記

我要補(bǔ)充