Angular Service Worker和PWA-入門

Service Worker 快速上手

本文檔解釋了如何在 ?Angular CLI? 項目中啟用對 Angular Service Worker 的支持。稍后它會用一個簡單的范例來向你展示 Service Worker 實踐，包括加載和基礎(chǔ)的緩存功能。

前提條件

對 Angular Service Worker 簡介中的信息有了基本的了解。

為你的項目添加 Service Worker

要讓你的項目支持 Angular Service Worker，可以使用 CLI 命令 ?ng add @angular/pwa?。它會添加 ?@angular/service-worker? 包，并建立必要的支持文件，小心翼翼地配置你的應(yīng)用，以便使用 Service Worker。

ng add @angular/pwa --project <project-name>

上述命令完成了如下步驟：

1. 把 @angular/service-worker 添加到你的項目中。
2. 在 CLI 中啟用 Service Worker 的構(gòu)建支持。
3. 在應(yīng)用模塊中導(dǎo)入并注冊 Service Worker。
4. 修改 ?index.html? 文件：
• 包含要添加到 ?manifest.webmanifest? 文件中的鏈接。
• 為 ?theme-color? 添加 meta 標(biāo)簽。
5. 創(chuàng)建圖標(biāo)文件，以支持安裝漸進(jìn)式應(yīng)用（PWA）。
6. 創(chuàng)建一個名叫 ?ngsw-config.json? 的 Service Worker 配置文件，它會用來指定緩存的行為以及其它設(shè)定。

現(xiàn)在，構(gòu)建本項目：

ng build

現(xiàn)在，這個 CLI 項目就可以使用 Angular Service Worker 了。

Service Worker 實戰(zhàn)：向?qū)?

本節(jié)用一個范例應(yīng)用來演示一下 Service Worker 實戰(zhàn)。

用 http-server 啟動開發(fā)服務(wù)器

由于 ?ng serve? 對 Service Worker 無效，所以必須用一個獨(dú)立的 HTTP 服務(wù)器在本地測試你的項目?？梢杂萌魏?nbsp;HTTP 服務(wù)器。下面這個例子使用來自 npm 中的 http-server 包。為了減小端口沖突的可能性，我們在一個專用端口上進(jìn)行測試。

要想使用 ?http-server? 在包含這些 web 文件的目錄上啟動服務(wù)，運(yùn)行下列命令：

http-server -p 8080 -c-1 dist/<project-name>

最初的加載

在服務(wù)器運(yùn)行起來之后，你可以在瀏覽器中訪問 ?<http://localhost:8080/>?。你的應(yīng)用像通常一樣加載。

提示：
當(dāng)測試 Angular Service Worker 時，最好使用瀏覽器中的隱身或隱私窗口，以確保 Service Worker 不會從以前的殘留狀態(tài)中讀取數(shù)據(jù)，否則可能導(dǎo)致意外的行為。

注意：
如果沒有使用 HTTPS，那么 Service Worker 只會在 ?localhost ?上的應(yīng)用中進(jìn)行注冊。

模擬網(wǎng)絡(luò)出問題

要想模擬網(wǎng)絡(luò)出問題的情況，可以為你的應(yīng)用禁用網(wǎng)絡(luò)交互。在 Chrome 中：

1. 選擇 Tools > Developer Tools（從右上角的 Chrome 菜單）。
2. 進(jìn)入 Network 頁。
3. 在 Throttling 下拉菜單中選擇 Offline 復(fù)選框。

現(xiàn)在，本應(yīng)用不能再和網(wǎng)絡(luò)進(jìn)行交互了。

對于那些不使用 Angular Service Worker 的應(yīng)用，現(xiàn)在刷新將會顯示 Chrome 的“網(wǎng)絡(luò)中斷”頁，提示“沒有可用的網(wǎng)絡(luò)連接”。

有了 Angular Service Worker，本應(yīng)用的行為就不一樣了。刷新時，頁面會正常加載。

看看 Network 頁，來驗證此 Service Worker 是激活的。

注意：
在 “Size” 列中，請求的狀態(tài)是 ?(ServiceWorker)?。 這表示該資源不是從網(wǎng)絡(luò)上加載的，而是從 Service Worker 的緩存中。

什么被緩存了？

注意，瀏覽器要渲染的所有這些文件都被緩存了。?ngsw-config.json? 樣板文件被配置成了要緩存 CLI 用到的那些文件：

• ?index.html ?
• ?favicon.ico ?
• 構(gòu)建結(jié)果（JS 和 CSS 包）
• ?assets ?下的一切
• 圖片和字體直接位于所配置的 outputPath (默認(rèn)為 ?./dist/<project-name>/?) 或 ?resourcesOutputPath ?下。

注意如下兩個關(guān)鍵點(diǎn)：

1. 所生成的 ?ngsw-config.json? 包括一個可緩存字體和圖像的有限列表。在某些情況下，你可能要按需修改這些 glob 模式。
2. 如果在生成了配置文件之后修改了 ?resourcesOutputPath ?或 ?assets ?的路徑，那么就要在 ?ngsw-config.json? 中手動修改這些路徑。

修改你的應(yīng)用

現(xiàn)在，你已經(jīng)看到了 Service Worker 如何緩存你的應(yīng)用，接下來的步驟講它如何進(jìn)行更新。

1. 如果你正在隱身窗口中測試，請打開第二個空白頁。這會讓該隱身窗口和緩存的狀態(tài)在測試期間持續(xù)活著。
2. 關(guān)閉該應(yīng)用的頁面，而不是整個窗口。這也會同時關(guān)閉開發(fā)者工具。
3. 關(guān)閉 ?http-server?。
4. 打開 ?src/app/app.component.html? 以供編輯。
5. 把文本 ?Welcome to {{title}}!? 改為 ?Bienvenue à {{title}}!?。
6. 再次構(gòu)建并運(yùn)行此服務(wù)器：

ng build
http-server -p 8080 -c-1 dist/<project-name>

在瀏覽器中更新你的應(yīng)用

現(xiàn)在，看看瀏覽器和 Service Worker 如何處理這個更新后的應(yīng)用。

1. 再次在同一個窗口中打開 http://localhost:8080，發(fā)生了什么？




錯在哪里？哪里也沒錯，真的。Angular Service Worker 正在做自己的工作，并且用它已經(jīng)安裝過的版本提供服務(wù)，雖然，已經(jīng)有新版本可用了。由于更關(guān)注速度，所以 Service Worker 并不會在啟動它已經(jīng)緩存過的版本之前先等待檢查更新。

看看 ?http-server? 的 log，就會發(fā)現(xiàn) Service Worker 請求了 ?/ngsw.json? 文件，這是 Service Worker 正在檢查更新。

2. 刷新頁面。




Service Worker 在后臺安裝好了這個更新后的版本，下次加載或刷新頁面時，Service Worker 就切換到最新的版本了。