免費AI編程助手
HTML5 離線緩存
在搞Painter時有涉及到HTML5離線緩存，最近想把其應(yīng)用到其他項目中，發(fā)現(xiàn)自己已經(jīng)忘得差不多了，所以寫下本文，給自己做個記錄。
本文將介紹離線緩存的方方面面，并在最后會介紹一下關(guān)于自動化的問題。
- 起源
- 什么是Cache Manifest
- Manifest的特點
- 瀏覽器支持情況
- 如何使用
- Manifest文件
- 如何更新緩存
- 注意事項
- 自動化工具
- 參考資料
起源
html5之前的網(wǎng)頁，都是無連接，必須聯(lián)網(wǎng)才能訪問，這其實也是web的特色，這其實對于PC是時代問題并不大，但到了移動互聯(lián)網(wǎng)時代，設(shè)備終端位置不再固定，依賴無線信號，網(wǎng)絡(luò)的可靠性變得降低，比如坐在火車上，過了一個隧道（15分鐘），便無法訪問網(wǎng)站，這對于web的傷害是很大的，比如對于 《ecmascript合集》這樣的為閱讀而生的頁面。
html5便引入了cache manifest 文件。那么什么是cache manifest呢，接下來會講到。
什么是Cache Manifest
首先manifest是一個后綴名為minifest的文件，在文件中定義那些需要緩存的文件，支持manifest的瀏覽器，會將按照manifest文件的規(guī)則，像文件保存在本地，從而在沒有網(wǎng)絡(luò)鏈接的情況下，也能訪問頁面。
當(dāng)我們第一次正確配置app cache后，當(dāng)我們再次訪問該應(yīng)用時，瀏覽器會首先檢查manifest文件是否有變動，如果有變動就會把相應(yīng)的變得跟新下來，同時改變?yōu)g覽器里面的app cache，如果沒有變動，就會直接把app cache的資源返回，基本流程是這樣的。
Manifest的特點
- 離線瀏覽: 用戶可以在離線狀態(tài)下瀏覽網(wǎng)站內(nèi)容。
- 更快的速度: 因為數(shù)據(jù)被存儲在本地，所以速度會更快.
- 減輕服務(wù)器的負(fù)載: 瀏覽器只會下載在服務(wù)器上發(fā)生改變的資源。
瀏覽器支持情況
所有主流瀏覽器均支持應(yīng)用程序緩存，除了 Internet Explorer。caniuse給出的答案如下圖所示。
如何使用
html新增了一個manifest屬性，可以用來指定當(dāng)前頁面的manifest文件。
創(chuàng)建一個和html同名的manifest文件，比如頁面為index.html，那么可以建一個index.manifest的文件，然后給index.html的html標(biāo)簽添加如下屬性即可：
<html lang="en" manifest="index.manifest">
Manifest文件
接下來詳細(xì)說說manifest的細(xì)節(jié)，一個典型的manifest文件代碼結(jié)構(gòu)像下面這樣：
CACHE MANIFEST
#version 1.3
CACHE:
test.css
NETWORK:
*
manifest文件，基本格式為三段： CACHE， NETWORK，與 FALLBACK，其中NETWORK和FALLBACK為可選項。
而第一行CACHE MANIFEST為固定格式，必須寫在前面。
以#號開頭的是注釋，一般會在第二行寫個版本號，用來在緩存的文件更新時，更改manifest的作用，可以是版本號，時間戳或者md5碼等等。
CACHE:（必須）
標(biāo)識出哪些文件需要緩存，可以是相對路徑也可以是絕對路徑。
a.css
http://yanhaijing.com/a.css
NETWORK:（可選）
這一部分是要繞過緩存直接讀取的文件，可以使用通配符＊。
下面的代碼 “l(fā)ogin.asp” 永遠不會被緩存，且離線時是不可用的：
NETWORK:
login.asp
可以使用星號來指示所有其他資源/文件都需要因特網(wǎng)連接：
NETWORK:
*
FALLBACK:（可選）
指定了一個后備頁面，當(dāng)資源無法訪問時，瀏覽器會使用該頁面。該段落的每條記錄都列出兩個 URI—第一個表示資源，第二個表示后備頁面。兩個 URI 都必須使用相對路徑并且與清單文件同源?？梢允褂猛ㄅ浞?/p>
下面的例子中，如果無法建立因特網(wǎng)連接，則用 “404.html” 替代 /html5/ 目錄中的所有文件。
FALLBACK:
/html5/ /404.html
下面的例子中，則用 “404.html” 替代所有文件。
FALLBACK:
*.html /404.html
如何更新緩存
如下三種方式，可以更新緩存：
- 更新manifest文件
- 通過javascript操作
- 清除瀏覽器緩存
給manifest添加或刪除文件，都可更新緩存，如果我們更改了js，而沒有新增或刪除，前面例子中注釋中的版本號，可以很好的用來更新manifest文件。
html5中引入了js操作離線緩存的方法，下面的js可以手動更新本地緩存。
window.applicationCache.update();
如果用戶清除了瀏覽器緩存（手動或用其他一些工具）都會重新下載文件。
注意事項
- 瀏覽器對緩存數(shù)據(jù)的容量限制可能不太一樣（某些瀏覽器設(shè)置的限制是每個站點 5MB）。
- 如果manifest文件，或者內(nèi)部列舉的某一個文件不能正常下載，整個更新過程都將失敗，瀏覽器繼續(xù)全部使用老的緩存。
- 引用manifest的html必須與manifest文件同源，在同一個域下。
- FALLBACK中的資源必須和manifest文件同源。
- 當(dāng)一個資源被緩存后，該瀏覽器直接請求這個絕對路徑也會訪問緩存中的資源。
- 站點中的其他頁面即使沒有設(shè)置manifest屬性，請求的資源如果在緩存中也從緩存中訪問。
- 當(dāng)manifest文件發(fā)生改變時，資源請求本身也會觸發(fā)更新。
自動化工具
manifest文件中的cache部分不能使用通配符，必須手動指定，這實在太讓人不可理解，文件一多，就成了體力活了，這里介紹的 grunt-manifest能自動生成manifest文件的目的。grunt-manifest依賴grunt，grunt是一個自動化構(gòu)建工具，如果你不知道grunt，請移步這里。
如下的命令可以安裝grunt-manifest，并加入到依賴文件。
npm install grunt-manifest --save-dev
如下的代碼，可以在grunt中載入grunt-manifest，然后便可使用。
grunt.loadNpmTasks('grunt-manifest');
使用grunt-manifest的一個典型的配置文件如下所示：
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 手動添加緩存文件
- network 手動添加網(wǎng)絡(luò)文件
- fallback 手動添加后備文件
- exclude 設(shè)置不添加到cache的文件
- verbose 是否添加版權(quán)信息
- timestamp 是否添加時間戳
這里有basejs的配置文件和生成的manifest文件的例子。
更多建議：