Angular - 服務工作執行緒 & PWA

---

---

漸進式 Web 應用 (PWA) 是具有少量增強的普通 Web 應用程式，其行為類似於原生應用程式。PWA 應用不依賴網路即可執行。PWA 快取應用程式並從本地快取中呈現。它會定期檢查應用程式的即時版本，然後在後臺快取最新版本。

PWA 可以像原生應用程式一樣安裝到系統中，並且可以在桌面上顯示快捷方式。單擊快捷方式將在瀏覽器中開啟應用程式，即使系統中沒有任何網路可用，也能使用本地快取。

Angular 應用程式可以轉換為 PWA 應用程式。要轉換 Angular 應用程式，我們需要使用服務工作執行緒 API。服務工作執行緒實際上是一個代理伺服器，它位於瀏覽器、應用程式和網路之間。

服務工作執行緒獨立於網頁。它無法訪問 DOM 物件。相反，服務工作執行緒透過 **PostMessage** 介面與網頁互動。

PWA 應用程式有兩個先決條件，如下所示：

• **瀏覽器支援** − 儘管許多瀏覽器都支援 PWA 應用程式，但 IE、Opera mini 和其他一些瀏覽器並不提供 PWA 支援。

• **HTTPS 傳輸** − 應用程式需要透過 HTTPS 協議傳輸。https 支援的一個例外是用於開發目的的 **localhost**。

讓我們建立一個新應用程式並將其轉換為 PWA 應用程式。

使用以下命令建立一個新的 Angular 應用程式：

cd /go/to/workspace 
ng new pwa-sample

使用以下命令新增 PWA 支援：

cd pwa-sample
ng add @angular/pwa --project pwa-sample

構建應用程式的生產版本：

ng build --prod

PWA 應用程式不在 Angular 開發伺服器下執行。使用以下命令安裝一個簡單的 Web 伺服器：

npm install -g http-server

執行 Web 伺服器並將應用程式的生產版本設定為根資料夾。

f the application as root folder.
http-server -p 8080 -c-1 dist/pwa-sample

開啟瀏覽器並輸入 **https://:8080**。

現在，轉到 **開發者工具 -> 網路** 並選擇 **離線** 選項。

**如果網路設定為離線，普通應用程式將停止工作，但 PWA 應用程式可以正常工作，如下所示：**