Angular Service Worker和PWA-入門(mén)

Service Worker 快速上手

本文檔解釋了如何在 ?Angular CLI? 項(xiàng)目中啟用對(duì) Angular Service Worker 的支持。稍后它會(huì)用一個(gè)簡(jiǎn)單的范例來(lái)向你展示 Service Worker 實(shí)踐，包括加載和基礎(chǔ)的緩存功能。

前提條件

對(duì) Angular Service Worker 簡(jiǎn)介中的信息有了基本的了解。

為你的項(xiàng)目添加 Service Worker

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

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

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

1. 把 @angular/service-worker 添加到你的項(xiàng)目中。
2. 在 CLI 中啟用 Service Worker 的構(gòu)建支持。
3. 在應(yīng)用模塊中導(dǎo)入并注冊(cè) 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)建一個(gè)名叫 ?ngsw-config.json? 的 Service Worker 配置文件，它會(huì)用來(lái)指定緩存的行為以及其它設(shè)定。

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

ng build

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

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

本節(jié)用一個(gè)范例應(yīng)用來(lái)演示一下 Service Worker 實(shí)戰(zhàn)。

用 http-server 啟動(dòng)開(kāi)發(fā)服務(wù)器

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

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

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

最初的加載

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

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

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

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

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

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

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

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

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

看看 Network 頁(yè)，來(lái)驗(yàn)證此 Service Worker 是激活的。

注意：
在 “Size” 列中，請(qǐng)求的狀態(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 ?下。

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

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

修改你的應(yīng)用

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

1. 如果你正在隱身窗口中測(cè)試，請(qǐng)打開(kāi)第二個(gè)空白頁(yè)。這會(huì)讓該隱身窗口和緩存的狀態(tài)在測(cè)試期間持續(xù)活著。
2. 關(guān)閉該應(yīng)用的頁(yè)面，而不是整個(gè)窗口。這也會(huì)同時(shí)關(guān)閉開(kāi)發(fā)者工具。
3. 關(guān)閉 ?http-server?。
4. 打開(kāi) ?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 如何處理這個(gè)更新后的應(yīng)用。

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




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

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

2. 刷新頁(yè)面。




Service Worker 在后臺(tái)安裝好了這個(gè)更新后的版本，下次加載或刷新頁(yè)面時(shí)，Service Worker 就切換到最新的版本了。