Angular 8 - Service Workers 和 PWA

漸進式 Web 應用 (PWA) 是普通 Web 應用程式，具有一些增強功能，並且行為類似於原生應用程式。PWA 應用不依賴網路即可工作。PWA 會快取應用程式並從本地快取中渲染。它會定期檢查應用程式的即時版本，然後在後臺快取最新版本。

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

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

Service Workers 與網頁是分開的。它無法訪問 DOM 物件。相反，Service Workers 透過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。

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