原文
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)紅包喳张。謝謝支持