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

前言

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

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級。

@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

.angular-cli.json

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

建置

接下來就是透過 ng build 來建置,但是發現建置後的檔案並沒有任何變化。

改用 ng build --prod 來建置,結果出現錯誤,從錯誤訊息可以知道目前 @angular/service-worker 只能使用 2.0.0 以前的版本,雖然有點失望,但是看起來未來 Angular 5 再編時就會讓網站變成 PWA。

降版

透過 npm i @angular/service-worker@latest 安裝 @angular/service-worker,讓版本降回-1.0.0-beta.16

重新再透過 ng build --prod 建置,可以發現 index.html 多載入一個 sw-register.xxx.bundle.js 檔。

開啟檔案可以看到它將 worker-basic.min.js 註冊給 ServiceWorker

開啟 worker-basic.min.js 並格式化,可以看到它會讀取 ngsw-manifest.json

開啟 ngsw-manifest.json 可以看到其實它就是我們在 PWA 替身術:ServiceWorker - caches 所做的靜態快取檔案清單。

後記

比對一下 @angular/service-worker 1.0.0-beta.16 版與 5.0.0-rc.0 版程式結構,可以發現新版本幾乎可以算是整個重新改寫。

因此
讓人期待的是應該會有更多 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