起源
大部分的網頁,必須聯(lián)網才能訪問柿祈,這其實也是web的特色哈误,但對于現(xiàn)在的移動互聯(lián)網時代,設備終端位置不再固定躏嚎,依賴無線信號蜜自,網絡的可靠性變得降低,比如坐在火車上卢佣,過了一個隧道(15分鐘)重荠,便無法訪問網站,這對于web的用戶體驗是大打折扣的虚茶。
html5便引入了cache manifest(離線緩存)文件來解決這個問題戈鲁。那么什么是cache manifest呢仇参?
什么是Cache Manifest
首先manifest是一個后綴名為minifest的文件,在文件中定義那些需要緩存的文件婆殿,支持manifest的瀏覽器诈乒,會將按照manifest文件的規(guī)則,像文件保存在本地鸣皂,從而在沒有網絡鏈接的情況下抓谴,也能訪問頁面暮蹂。
當我們第一次正確配置app cache后寞缝,當我們再次訪問該應用時,瀏覽器會首先檢查manifest文件是否有變動仰泻,如果有變動就會把相應的變得跟新下來荆陆,同時改變?yōu)g覽器里面的app cache,如果沒有變動集侯,就會直接把app cache的資源返回被啼,基本流程如下所示。
Manifest的特點
- 離線瀏覽: 用戶可以在離線狀態(tài)下瀏覽網站內容棠枉。
- 更快的速度: 因為數(shù)據(jù)被存儲在本地浓体,所以速度會更快.
- 減輕服務器的負載: 瀏覽器只會下載在服務器上發(fā)生改變的資源。
瀏覽器支持情況
所有主流瀏覽器均支持應用程序緩存辈讶,除了 Internet Explorer命浴。caniuse給出的答案如下圖所示。
如何使用
html新增了一個manifest屬性贱除,可以用來指定當前頁面的manifest文件生闲。創(chuàng)建一個和html同名的manifest文件,比如頁面為index.html月幌,那么可以建一個index.manifest的文件碍讯,然后給index.html的html標簽添加如下屬性即可:
<html lang="en" manifest="index.manifest">
index.maifest 要存在于web服務器中,路徑可以隨意置頂扯躺,但是要確保能找到此文件捉兴。對于java的tomcat來說,需要在web.xml添加一個屬性來支持此文件的類型录语。如下所示
<mime-mapping>
<extension>manifest</extension>
<mime-type>text/cache-manifest</mime-type>
</mime-mapping>
Manifest文件
接下來詳細說說manifest的細節(jié)倍啥,一個典型的manifest文件代碼結構像下面這樣:
CACHE MANIFEST
# This manifest was generated by grunt-manifest HTML5 Cache Manifest Generator
# Time: Mon Nov 14 2016 16:52:07 GMT+0800 (中國標準時間)
CACHE:
suimobile/dist/js/suimobileApp.js
suimobile/css/mobile-app-sui.css
suimobile/js/lib/suimobile/sm.css
suimobile/font/fontawesome/font-awesome.css
suimobile/font/iconfont/iconfont.css
NETWORK:
*
# hash: e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855
manifest文件,基本格式為三段: CACHE钦无, NETWORK逗栽,與 FALLBACK,其中NETWORK和FALLBACK為可選項失暂。
而第一行CACHE MANIFEST為固定格式彼宠,必須寫在前面鳄虱。
以#號開頭的是注釋,一般會在第二行寫個版本號凭峡,用來在緩存的文件更新時拙已,更改manifest的作用,可以是版本號摧冀,時間戳或者md5碼等等倍踪。
- CACHE:(必須)標識出哪些文件需要緩存,可以是相對路徑也可以是絕對路徑索昂。
-
NETWORK:(可選)這一部分是要繞過緩存直接讀取的文件建车,可以使用通配符*。
下面的代碼 “l(fā)ogin.asp” 永遠不會被緩存椒惨,且離線時是不可用的:
NETWORK:login.asp
可以使用星號來指示所有其他資源/文件都需要因特網連接:
-
FALLBACK:(可選)
指定了一個后備頁面缤至,當資源無法訪問時,瀏覽器會使用該頁面康谆。該段落的每條記錄都列出兩個 URI—第一個表示資源领斥,第二個表示后備頁面。兩個 URI 都必須使用相對路徑并且與清單文件同源沃暗≡侣澹可以使用通配符。
下面的例子中孽锥,如果無法建立因特網連接嚼黔,則用 “404.html” 替代 /html5/ 目錄中的所有文件。
FALLBACK:/html5/ /404.html
下面的例子中忱叭,則用 “404.html” 替代所有文件隔崎。
如何更新緩存
如下三種方式,可以更新緩存:
- 更新manifest文件:給manifest添加或刪除文件韵丑,都可更新緩存爵卒,如果我們更改了js,而沒有新增或刪除撵彻,前面例子中注釋中的版本號钓株,可以很好的用來更新manifest文件
- 通過javascript操作:html5中引入了js操作離線緩存的方法,下面的js可以手動更新本地緩存陌僵。
window.applicationCache.update();
- 清除瀏覽器緩存:如果用戶清除了瀏覽器緩存(手動或用其他一些工具)都會重新下載文件轴合。
注意事項
- 瀏覽器對緩存數(shù)據(jù)的容量限制可能不太一樣(某些瀏覽器設置的限制是每個站點 5MB)。
- 如果manifest文件碗短,或者內部列舉的某一個文件不能正常下載受葛,整個更新過程都將失敗,瀏覽器繼續(xù)全部使用老的緩存。
- 引用manifest的html必須與manifest文件同源总滩,在同一個域下纲堵。
- FALLBACK中的資源必須和manifest文件同源。
- 當一個資源被緩存后闰渔,該瀏覽器直接請求這個絕對路徑也會訪問緩存中的資源席函。
- 站點中的其他頁面即使沒有設置manifest屬性,請求的資源如果在緩存中也從緩存中訪問冈涧。
- 當manifest文件發(fā)生改變時茂附,資源請求本身也會觸發(fā)更新。
自動化工具
manifest文件中的cache部分不能使用通配符督弓,必須手動指定营曼,這實在太讓人不可理解,文件一多咽筋,就成了體力活了溶推,這里介紹的 grunt-manifest能自動生成manifest文件的目的。
如下的命令可以安裝grunt-manifest奸攻,并加入到依賴文件。
npm install grunt-manifest --save-dev
如下的代碼虱痕,可以在grunt中載入grunt-manifest睹耐,然后便可使用。
grunt.loadNpmTasks('grunt-manifest');
使用grunt-manifest的一個典型的配置文件如下所示:
grunt.initConfig({
...
//離線緩存生成配置
manifest: {
generate: {
options: {
basePath: '../',
cache: [
'suimobile/dist/js/suimobileApp.js'//js文件
//樣式文件
,'suimobile/css/mobile-app-sui.css'
,'suimobile/js/lib/suimobile/sm.css'
,'suimobile/font/fontawesome/font-awesome.css'
,'suimobile/font/iconfont/iconfont.css'
],
// network: ['*'],
// fallback: ['/ /offline.html'],
exclude: ['js/jquery.min.js'],
// preferOnline: true,
// headcomment: " <%= pkg.name %> v<%= pkg.version %>",
verbose: true,
timestamp: true,//添加時間戳部翘,每次執(zhí)行腳本時加入最新的時間戳
hash: true,//添加hash code硝训,作用和上面一樣
// master: ['index.html'],
process: function(path) {
return path.substring('build/'.length);
}
},
src: [
'build/some_files/*.html',
'build/js/*.min.js',
'build/css/*.css'
],
dest: '<%= folder.base %>/<%= folder.dist %>/index.manifest'//最終生成的離線配置文件路徑
}
}
});
其中options定義生成manifest的一些自定義參數(shù),src是要生成的文件新思,dest是輸出文件窖梁。
options下有很多參數(shù),主要參數(shù)如下:
- basePath 設置出入文件的根目錄
- cache 手動添加緩存文件
- network 手動添加網絡文件
- fallback 手動添加后備文件
- exclude 設置不添加到cache的文件
- verbose 是否添加版權信息
- timestamp是否添加時間戳