[翻譯]Angular Service Worker 介紹

原文
Service workers 使用原生js代碼增強(qiáng)了傳統(tǒng)web應(yīng)用萄唇,使用戶(hù)體驗(yàn)到更高的可靠性與更好的體驗(yàn)。

Service worker只是一個(gè)運(yùn)行在瀏覽器端并可為應(yīng)用管理緩存的腳本

Service workers 是作為一個(gè)客戶(hù)端代理患久。它們攔截所有應(yīng)用的http請(qǐng)求,然后自定義如何去回復(fù)。例如:它們可以查詢(xún)本地的緩存蒋失,可以直接把緩存作為回復(fù)內(nèi)容返帕。這些代理不限于api的請(qǐng)求,還包括在HTML里的資源請(qǐng)求還有index.html里的初始化請(qǐng)求篙挽【S基于Service workers的緩存是完全可編程的,不依賴(lài)于服務(wù)器指定的緩存頭铣卡。

不像如angular應(yīng)用的bundle腳本链韭,在關(guān)閉頁(yè)面后就消失了,service worker 是可以一直保留的煮落。下次在同一瀏覽器打開(kāi)應(yīng)用敞峭,service worker是首先加載的,并可以攔截所有的資源請(qǐng)求蝉仇。如果你的service worker是如此配置的儡陨,它就可以在無(wú)網(wǎng)絡(luò)的情況下完成應(yīng)用的加載。

即使在一個(gè)快速可靠的網(wǎng)絡(luò)中量淌,往返延遲也會(huì)在加載應(yīng)用程序時(shí)產(chǎn)生嚴(yán)重的延遲骗村。使用service worker減少對(duì)網(wǎng)絡(luò)的依賴(lài)并可顯著改善用戶(hù)體驗(yàn)。

Angular的Service workers

利用service workers的長(zhǎng)處可很好改善如angular一樣的單頁(yè)面應(yīng)用呀枢。從5.0.0開(kāi)始胚股,angular加入了service worker。angular開(kāi)發(fā)人員可以利用service workers去提高應(yīng)用的可靠性與性能裙秋,不再需要在低層面的API層去部署琅拌。

angular的service worker是設(shè)計(jì)去優(yōu)化處于低網(wǎng)速或不穩(wěn)定網(wǎng)絡(luò)的終端用戶(hù)的體驗(yàn),同時(shí)也減少提供過(guò)期數(shù)據(jù)的風(fēng)險(xiǎn)

angular的service worker的行為遵循以下的設(shè)計(jì)目標(biāo):

  • 緩存一個(gè)應(yīng)用就像安裝一個(gè)原生的應(yīng)用摘刑。這應(yīng)用是被作為一個(gè)整體去緩存并一同更新进宝。

  • 一個(gè)在執(zhí)行的應(yīng)用是會(huì)繼續(xù)使用同一版本的所有文件。它不會(huì)突然從新版本中接收新的緩存枷恕,因?yàn)楹芸赡軙?huì)前后互相沖突

  • 當(dāng)用戶(hù)刷新應(yīng)用党晋,他們能看到最近的緩存版本。新的tab頁(yè)會(huì)加載最近的緩存腳本徐块。

  • 應(yīng)用更改并發(fā)布后未玻,緩存的更新是在后臺(tái)執(zhí)行,而且十分快速胡控。在更新完成前扳剿,舊版本會(huì)一直繼續(xù)服務(wù)。

  • service worke盡可能的節(jié)省帶寬昼激。只會(huì)在資源被修改后重新下載資源庇绽。

要支持以上的行為锡搜,angular的service worker從服務(wù)中加載一個(gè)manifest 文件。這個(gè)文件定義了要緩存的資源表瞧掺,同時(shí)包括各資源內(nèi)容的hashes碼余爆。當(dāng)應(yīng)用更新了,manifest文件也會(huì)被修改夸盟,然后通知service worker去下載新版本并作緩存蛾方。這個(gè)manifest文件是根據(jù)用戶(hù)提供的配置文件ngsw-config.json去生成,這一步可依靠如Angular CLI的工具去實(shí)現(xiàn)

加入 Angular service 是十分簡(jiǎn)單上陕,只需要修改 NgModule桩砰。在里面注冊(cè)service worker就好,然后angular會(huì)自動(dòng)注入服務(wù)释簿,然后service worker就可以獲得應(yīng)用的控制權(quán)亚隅。例如,應(yīng)用可以在有可用更新時(shí)獲得通知庶溶,或者應(yīng)用可以要求service worker去檢查是否有可用的更新煮纵。

前置配置

為了使用angular的service workers,你必須是以下的Angular 和 CLI 的版本:

  • 不低于Angular 5.0.0r.
  • 不低于Angular CLI 1.6.0.

你的應(yīng)用必須運(yùn)行在支持service workers的瀏覽器中偏螺。最新版本的Chrome 和 Firefox 都支持行疏。可通過(guò)可以用嗎 頁(yè)面去看各瀏覽對(duì)service worker的支持情況套像。

相關(guān)資源

想了解service worker酿联,請(qǐng)看介紹Service Workers.

關(guān)于瀏覽器的支持,請(qǐng)看瀏覽器的支持 夺巩、介紹Service Workers, Jake Archibald的 Serviceworker準(zhǔn)備好了嗎, and 可以用嗎.

其余的文檔會(huì)繼續(xù)深入service worker

更多的關(guān)于Angular service workers

你可能對(duì)以下感興趣

你們的贊賞是我的無(wú)限動(dòng)力

如果覺(jué)得文章對(duì)你有點(diǎn)用的話(huà)贞让,麻煩拿出手機(jī),這里有一個(gè)你我都有的小福利(每天一次): 打開(kāi)支付寶首頁(yè)搜索“8601304”柳譬,即可領(lǐng)紅包喳张。謝謝支持

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市美澳,隨后出現(xiàn)的幾起案子销部,更是在濱河造成了極大的恐慌,老刑警劉巖人柿,帶你破解...
    沈念sama閱讀 218,036評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件柴墩,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡凫岖,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,046評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén)逢净,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)哥放,“玉大人歼指,你說(shuō)我怎么就攤上這事∩瘢” “怎么了踩身?”我有些...
    開(kāi)封第一講書(shū)人閱讀 164,411評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)社露。 經(jīng)常有香客問(wèn)我挟阻,道長(zhǎng),這世上最難降的妖魔是什么峭弟? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,622評(píng)論 1 293
  • 正文 為了忘掉前任附鸽,我火速辦了婚禮,結(jié)果婚禮上瞒瘸,老公的妹妹穿的比我還像新娘坷备。我一直安慰自己,他們只是感情好情臭,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,661評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布省撑。 她就那樣靜靜地躺著,像睡著了一般俯在。 火紅的嫁衣襯著肌膚如雪竟秫。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 51,521評(píng)論 1 304
  • 那天跷乐,我揣著相機(jī)與錄音鸿摇,去河邊找鬼。 笑死劈猿,一個(gè)胖子當(dāng)著我的面吹牛拙吉,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播揪荣,決...
    沈念sama閱讀 40,288評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼筷黔,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了仗颈?” 一聲冷哼從身側(cè)響起佛舱,我...
    開(kāi)封第一講書(shū)人閱讀 39,200評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎挨决,沒(méi)想到半個(gè)月后请祖,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,644評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡脖祈,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,837評(píng)論 3 336
  • 正文 我和宋清朗相戀三年肆捕,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片盖高。...
    茶點(diǎn)故事閱讀 39,953評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡慎陵,死狀恐怖眼虱,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情席纽,我是刑警寧澤捏悬,帶...
    沈念sama閱讀 35,673評(píng)論 5 346
  • 正文 年R本政府宣布,位于F島的核電站润梯,受9級(jí)特大地震影響过牙,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜纺铭,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,281評(píng)論 3 329
  • 文/蒙蒙 一寇钉、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧彤蔽,春花似錦摧莽、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,889評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至蚁袭,卻和暖如春征懈,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背揩悄。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,011評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工卖哎, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人删性。 一個(gè)月前我還...
    沈念sama閱讀 48,119評(píng)論 3 370
  • 正文 我出身青樓亏娜,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親蹬挺。 傳聞我的和親對(duì)象是個(gè)殘疾皇子维贺,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,901評(píng)論 2 355