Angular 的 Service Worker 簡介

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

簡單來說，Service Worker 就是一段運行在 Web 瀏覽器中，并為應用管理緩存的腳本。

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

不像應用中的其它腳本（如 Angular 的應用包），Service Worker 在用戶關閉瀏覽器頁標簽時仍然會被保留。下次瀏覽器加載本應用時，Service Worker 會首先加載，然后攔截加載本應用時的對每一項資源的請求。如果這個 Service Worker 就是為此而設計的，它就能完全滿足應用加載時的需求，而不需要依賴網(wǎng)絡。

即使在快速可靠的網(wǎng)絡中，往返延遲也可能在加載應用程序時產生顯著的延遲。使用 Service Worker 來減少對網(wǎng)絡的依賴可以顯著改善用戶體驗。

Angular 中的 Service Worker

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

Angular 的 Service Worker 的設計目標是優(yōu)化那些使用慢速、不可靠網(wǎng)絡的最終用戶的體驗，同時還要盡可能減小提供過期內容的風險。

為了達成此目標，Angular Service Worker 的行為遵循下列設計原則：

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

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

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

前提條件

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

要注冊 Service Worker，必須通過 HTTPS 而非 HTTP 訪問該應用程序。瀏覽器會忽略通過不安全連接訪問的頁面上的 Service Worker。原因是 Service Worker 非常強大，因此需要格外小心，以確保 Service Worker 的腳本未被篡改。

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

瀏覽器支持

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

如果用戶通過不支持 Service Worker 的瀏覽器訪問你的應用程序，則該 Service Worker 不會注冊，并且不會發(fā)生相關行為，比如脫機緩存管理和推送通知。進一步來說：

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

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

要了解關于其它支持 Service Worker 的瀏覽器的更多信息，請參閱 Can I Use 頁面和 MDN 文檔。