既期待又怕受傷害：@angular/service-worker

更新於 分類於

前言

原本打算研究 ServiceWorker 另一個功能-Sync，不過網路上找不到比較詳細的說明，也沒比較完整的範例，因此打算改研究 Workbox 或 @angular/service-worker，因為這2個是將 Angular 調整為 PWA 比較常見的用法，但是從 npm 網站查詢可以看到 @angular/service-worker 被歸屬在 mobile-toolkit 下面，而 mobile-toolkit 幾乎沒有在維護了。

img
從 https://mobile.angular.io/guides/ 網站說明可以看到 Angular CLI 版本停留在 1.0.0-beta.4，@angular/service-worker 的版本則停在 1.0.0-beta.16，不過看到最後發佈是在4個月前，一時興起就乾脆查一下它發布過的版本，透過 npm show @angular/service-worker 查詢後發現就在幾天前(09/28) 5.0.0-rc.0 版出現了，一口氣連升4級。
img

@angular/service-worker

由版本號 5.0.0-rc.0 版其實大概可以推敲出它是跟著 Angular 版本號，所以正式版發布時透過 CLI 建立的專案應該會直接內建。
接下來當然是建立個 Angular 5.0.0-rc 的專案，先透過 CLI 建立一個 Angular 4 專案，接著透過 npm 指令去抓取 next 版本，指令如下：
npm i @angular/animations@next @angular/common@next @angular/compiler@next @angular/core@next @angular/forms@next @angular/http@next @angular/platform-browser@next @angular/platform-browser-dynamic@next @angular/router@next
npm i -D @angular/cli@next @angular/compiler-cli@next @angular/language-service@next
因為 Angular 4 並沒有內建 @angular/service-worker ，所以要再額外安裝。
npm i @angular/service-worker@next
img

.angular-cli.json

透過官方文件 Angular CLI Config Schema 可以看到 .angular-cli.json 內的 app 區段有一個屬性 serviceWorker 預設是關閉(false)的，在此我們將它開啟。
img
img

建置

接下來就是透過 ng build 來建置，但是發現建置後的檔案並沒有任何變化。
img
改用 ng build --prod 來建置，結果出現錯誤，從錯誤訊息可以知道目前 @angular/service-worker 只能使用 2.0.0 以前的版本，雖然有點失望，但是看起來未來 Angular 5 再編時就會讓網站變成 PWA。
img

降版

透過 npm i @angular/service-worker@latest 安裝 @angular/service-worker，讓版本降回-1.0.0-beta.16。
img
重新再透過 ng build --prod 建置，可以發現 index.html 多載入一個 sw-register.xxx.bundle.js 檔。
img
開啟檔案可以看到它將 worker-basic.min.js 註冊給 ServiceWorker。
img
開啟 worker-basic.min.js 並格式化，可以看到它會讀取 ngsw-manifest.json。
img
開啟 ngsw-manifest.json 可以看到其實它就是我們在 PWA 替身術：ServiceWorker - caches 所做的靜態快取檔案清單。
img

後記

比對一下 @angular/service-worker 1.0.0-beta.16 版與 5.0.0-rc.0 版程式結構，可以發現新版本幾乎可以算是整個重新改寫。
img
因此
讓人期待的是應該會有更多 ServiceWorker 功能被時做出來。
讓人害怕的是會不會是我們以後不用改寫任何一行程式碼，只要升級到 Angular 5版就會變成 PWA 應用程式。

目前好像突然沒有動力去研究 Workbox 了，好像連什麼是 PWA 也不用在意了，怎麼 Angular 搞得跟 MMORPG 一樣 - 升級送裝備。

@angular/service-worker 5.0.0-rc.0 實作方式可以參考：
A new Angular Service Worker — creating automatic progressive web apps. Part 1: theory