HTML5離線緩存技術

起源

大部分的網頁,必須聯(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碼等等倍踪。

  1. CACHE:(必須)標識出哪些文件需要緩存,可以是相對路徑也可以是絕對路徑索昂。
  2. NETWORK:(可選)這一部分是要繞過緩存直接讀取的文件建车,可以使用通配符*。
    下面的代碼 “l(fā)ogin.asp” 永遠不會被緩存椒惨,且離線時是不可用的:
NETWORK:login.asp

可以使用星號來指示所有其他資源/文件都需要因特網連接:

  1. 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是否添加時間戳
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末夹囚,一起剝皮案震驚了整個濱河市纵刘,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌荸哟,老刑警劉巖假哎,帶你破解...
    沈念sama閱讀 218,036評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異鞍历,居然都是意外死亡舵抹,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,046評論 3 395
  • 文/潘曉璐 我一進店門劣砍,熙熙樓的掌柜王于貴愁眉苦臉地迎上來惧蛹,“玉大人,你說我怎么就攤上這事∠闵ぃ” “怎么了爵政?”我有些...
    開封第一講書人閱讀 164,411評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長陶缺。 經常有香客問我钾挟,道長,這世上最難降的妖魔是什么饱岸? 我笑而不...
    開封第一講書人閱讀 58,622評論 1 293
  • 正文 為了忘掉前任掺出,我火速辦了婚禮,結果婚禮上苫费,老公的妹妹穿的比我還像新娘汤锨。我一直安慰自己,他們只是感情好百框,可當我...
    茶點故事閱讀 67,661評論 6 392
  • 文/花漫 我一把揭開白布闲礼。 她就那樣靜靜地躺著,像睡著了一般铐维。 火紅的嫁衣襯著肌膚如雪柬泽。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,521評論 1 304
  • 那天嫁蛇,我揣著相機與錄音锨并,去河邊找鬼。 笑死睬棚,一個胖子當著我的面吹牛第煮,可吹牛的內容都是我干的。 我是一名探鬼主播抑党,決...
    沈念sama閱讀 40,288評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼包警,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了底靠?” 一聲冷哼從身側響起害晦,我...
    開封第一講書人閱讀 39,200評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎苛骨,沒想到半個月后篱瞎,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 45,644評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡痒芝,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,837評論 3 336
  • 正文 我和宋清朗相戀三年俐筋,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片严衬。...
    茶點故事閱讀 39,953評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡澄者,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情粱挡,我是刑警寧澤赠幕,帶...
    沈念sama閱讀 35,673評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站询筏,受9級特大地震影響榕堰,放射性物質發(fā)生泄漏。R本人自食惡果不足惜嫌套,卻給世界環(huán)境...
    茶點故事閱讀 41,281評論 3 329
  • 文/蒙蒙 一逆屡、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧踱讨,春花似錦魏蔗、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,889評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至帚稠,卻和暖如春谣旁,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背翁锡。 一陣腳步聲響...
    開封第一講書人閱讀 33,011評論 1 269
  • 我被黑心中介騙來泰國打工蔓挖, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人馆衔。 一個月前我還...
    沈念sama閱讀 48,119評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像怨绣,于是被迫代替她去往敵國和親角溃。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,901評論 2 355

推薦閱讀更多精彩內容

  • 轉載:H5緩存機制淺析-移動端Web加載性能優(yōu)化【干貨】 作者:賀輝超篮撑,騰訊游戲平臺與社區(qū)產品部 高級工程師 目錄...
    meng_philip123閱讀 11,514評論 6 48
  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具(例如配置管理减细,服務發(fā)現(xiàn),斷路器赢笨,智...
    卡卡羅2017閱讀 134,656評論 18 139
  • 0. 前言 前面有被用戶投訴 APP 流量消耗厲害: 于是乎考慮了流量方面的問題未蝌。暫時 APP 中涉及流量的幾個方...
    zyl06閱讀 24,006評論 5 62
  • Html5 引入了應用程序緩存,這意味著web應用可以進行緩存茧妒,并且可以在沒有網絡連接的時候進行訪問萧吠。1.1 什么...
    Victor細節(jié)閱讀 3,995評論 0 0
  • 起源 html5之前的網頁,都是無連接桐筏,必須聯(lián)網才能訪問纸型,這其實也是web的特色,這其實對于PC是時代問題并不大,...
    就當我扯淡閱讀 1,791評論 0 3