Angular Service Worker和PWA-介紹

Angular 的 Service Worker 簡介

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

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

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

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

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

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 的設(shè)計目標是優(yōu)化那些使用慢速、不可靠網(wǎng)絡(luò)的最終用戶的體驗，同時還要盡可能減小提供過期內(nèi)容的風險。

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

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

要支持這些行為，Angular 的 Service Worker 會從服務器上下載一個 ?manifest ?文件。 這個 ?manifest ?文件（不同于 web 應用的 manifest）描述要緩存的資源，并包含每個文件內(nèi)容的哈希值。 當發(fā)布了應用的一個新版本時，?manifest ?的內(nèi)容就會改變，通知 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ā)生相關(guān)行為，比如脫機緩存管理和推送通知。進一步來說：

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

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

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