Angular Service Worker和PWA-介紹

Angular 的 Service Worker 簡(jiǎn)介

Service Worker 可以增強(qiáng)傳統(tǒng)的 Web 發(fā)布模式，并使應(yīng)用程序能夠提供可與原生代碼（它運(yùn)行在你的操作系統(tǒng)和硬件層面）媲美的高可靠、高性能的用戶體驗(yàn)。為 Angular 應(yīng)用添加 Service Worker 是把應(yīng)用轉(zhuǎn)換成漸進(jìn)式應(yīng)用（PWA）的步驟之一。

簡(jiǎn)單來(lái)說(shuō)，Service Worker 就是一段運(yùn)行在 Web 瀏覽器中，并為應(yīng)用管理緩存的腳本。

Service Worker 的功能就像一個(gè)網(wǎng)絡(luò)代理。它們會(huì)攔截所有由應(yīng)用發(fā)出的 HTTP 請(qǐng)求，并選擇如何給出響應(yīng)。比如，它們可以查詢局部緩存，如果有緩存的響應(yīng)數(shù)據(jù)，就用它做出響應(yīng)。這種代理行為不會(huì)局限于通過(guò)程序調(diào)用 API（比如 ?fetch?）發(fā)起的請(qǐng)求，還包括 HTML 中對(duì)資源的引用，甚至對(duì) ?index.html? 的首次請(qǐng)求?；?nbsp;Service Worker 的緩存是完全可編程的，并且不依賴于服務(wù)端指定的那些控制緩存策略的頭。

不像應(yīng)用中的其它腳本（如 Angular 的應(yīng)用包），Service Worker 在用戶關(guān)閉瀏覽器頁(yè)標(biāo)簽時(shí)仍然會(huì)被保留。下次瀏覽器加載本應(yīng)用時(shí)，Service Worker 會(huì)首先加載，然后攔截加載本應(yīng)用時(shí)的對(duì)每一項(xiàng)資源的請(qǐng)求。如果這個(gè) Service Worker 就是為此而設(shè)計(jì)的，它就能完全滿足應(yīng)用加載時(shí)的需求，而不需要依賴網(wǎng)絡(luò)。

即使在快速可靠的網(wǎng)絡(luò)中，往返延遲也可能在加載應(yīng)用程序時(shí)產(chǎn)生顯著的延遲。使用 Service Worker 來(lái)減少對(duì)網(wǎng)絡(luò)的依賴可以顯著改善用戶體驗(yàn)。

Angular 中的 Service Worker

作為單頁(yè)面應(yīng)用，Angular 應(yīng)用可以受益于 Service Worker 的優(yōu)勢(shì)。從 Angular v5.0.0 開始，Angular 提供了一份 Service Worker 的實(shí)現(xiàn)。Angular 開發(fā)人員可以利用 Service Worker，并受益于其增強(qiáng)的可靠性和性能，而無(wú)需再針對(duì)底層 API 寫代碼。

Angular 的 Service Worker 的設(shè)計(jì)目標(biāo)是優(yōu)化那些使用慢速、不可靠網(wǎng)絡(luò)的最終用戶的體驗(yàn)，同時(shí)還要盡可能減小提供過(guò)期內(nèi)容的風(fēng)險(xiǎn)。

為了達(dá)成此目標(biāo)，Angular Service Worker 的行為遵循下列設(shè)計(jì)原則：

• 像安裝原生應(yīng)用一樣緩存應(yīng)用。該應(yīng)用作為整體被緩存，它的所有文件作為整體進(jìn)行更新。
• 正在運(yùn)行的應(yīng)用使用所有文件的同一版本繼續(xù)運(yùn)行。不要突然開始接收來(lái)自新版本的、可能不兼容的緩存文件。
• 當(dāng)用戶刷新本應(yīng)用時(shí)，他們會(huì)看到最新的被完全緩存的版本。新的頁(yè)標(biāo)簽中會(huì)加載最新的緩存代碼。
• 在更改發(fā)布之后，相對(duì)較快的在后臺(tái)進(jìn)行更新。在一次完整的更新完成之前，仍然使用應(yīng)用的上一個(gè)版本。
• 只要有可能，Service Worker 就會(huì)盡量節(jié)省帶寬。它只會(huì)下載那些發(fā)生了變化的資源。

要支持這些行為，Angular 的 Service Worker 會(huì)從服務(wù)器上下載一個(gè) ?manifest ?文件。 這個(gè) ?manifest ?文件（不同于 web 應(yīng)用的 manifest）描述要緩存的資源，并包含每個(gè)文件內(nèi)容的哈希值。 當(dāng)發(fā)布了應(yīng)用的一個(gè)新版本時(shí)，?manifest ?的內(nèi)容就會(huì)改變，通知 Service Worker 應(yīng)該下載并緩存應(yīng)用的一個(gè)新版本了。 這個(gè) manifest 是從 CLI 生成的一個(gè)名叫 ?ngsw-config.json? 的文件中生成的。

安裝 Angular 的 Service Worker 就像引入一個(gè) ?NgModule ?一樣簡(jiǎn)單。除了使用瀏覽器注冊(cè) Angular 的 Service Worker 之外，還要制作一些可供注入的服務(wù)，它們可以與 Service Worker 交互，并控制它。比如，應(yīng)用可以要求當(dāng)新的更新已經(jīng)就緒時(shí)通知自己，或要求 Service Worker 檢查服務(wù)器，看是否有可用的更新。

前提條件

要使用 Angular Service Worker 的所有功能，請(qǐng)使用最新版本的 Angular 和 Angular CLI。

要注冊(cè) Service Worker，必須通過(guò) HTTPS 而非 HTTP 訪問(wèn)該應(yīng)用程序。瀏覽器會(huì)忽略通過(guò)不安全連接訪問(wèn)的頁(yè)面上的 Service Worker。原因是 Service Worker 非常強(qiáng)大，因此需要格外小心，以確保 Service Worker 的腳本未被篡改。

這條規(guī)則有一個(gè)例外：為了方便本地開發(fā)，當(dāng)訪問(wèn) ?localhost ?上的應(yīng)用時(shí)，瀏覽器不要求安全連接。

瀏覽器支持

要從 Angular Service Worker 中受益，你的應(yīng)用必須在支持 Service Worker 的 Web 瀏覽器中運(yùn)行。當(dāng)前，最新版本的 Chrome，F(xiàn)irefox，Edge，Safari，Opera，UC 瀏覽器（Android 版）和 Samsung Internet 支持 Service Worker。而 IE 和 Opera Mini 等瀏覽器不支持 Service Worker。

如果用戶通過(guò)不支持 Service Worker 的瀏覽器訪問(wèn)你的應(yīng)用程序，則該 Service Worker 不會(huì)注冊(cè)，并且不會(huì)發(fā)生相關(guān)行為，比如脫機(jī)緩存管理和推送通知。進(jìn)一步來(lái)說(shuō)：

• 瀏覽器不會(huì)下載 Service Worker 腳本和 ?ngsw.json? 清單文件。
• 主動(dòng)嘗試與 Service Worker 進(jìn)行交互，比如調(diào)用 ?SwUpdate.checkForUpdate()?，會(huì)返回被拒絕的承諾（Promise）
• 相關(guān)服務(wù)（比如 ?SwUpdate.available?）的可觀察事件不會(huì)觸發(fā)

強(qiáng)烈建議你確保即使在瀏覽器中沒(méi)有 Service Worker 支持的情況下，你的應(yīng)用也可以正常運(yùn)行。盡管不受支持的瀏覽器會(huì)忽略 Service Worker 緩存，但如果應(yīng)用程序嘗試與 Service Worker 進(jìn)行交互，它將仍然會(huì)報(bào)告錯(cuò)誤。比如，調(diào)用 ?SwUpdate.checkForUpdate()? 將返回被拒絕的承諾。為避免此類錯(cuò)誤，你可以使用 ?SwUpdate.isEnabled()? 檢查是否啟用了 Angular Service Worker。

要了解關(guān)于其它支持 Service Worker 的瀏覽器的更多信息，請(qǐng)參閱 Can I Use 頁(yè)面和 MDN 文檔。