【SNF-A】Angular CLI 增加了 Service Worker 支持

類別

新增功能／Splendid New Feature

置信度

Announcement

起始時間

2017-02-09

更新（2017-04-12）

「ngsw-manifest.json 為 Web App Manifest」為錯誤內容，ngsw-manifest.json 是 @angular/service-worker 自身所使用的資源文件，並非 PWA 中使用的 Web App Manifest。

關於 ngsw-manifest.json 的說明可以參考：angular/mobile-toolkit，以及 ng-conf 中的介紹視頻：https://www.youtube.com/watch?v=ecu1vAO23ZM

內容

自 1.0.0-beta.31 版本開始，@angular/cli 增加了對 Service Worker 的支持。

Angular CLI 的 .angular-cli.json 文件（舊版本為 angular-cli.json 文件）中增加了一個 serviceWorker 屬性，用於開啟對 Service Worker 的支持（替換原先曾經存在過但不久便被停止使用的 mobile 屬性）。

由於目前還無法通過 ng new 命令的參數來控制 Service Worker 支持，因此需要手動設置 .angular-cli.json 文件來開啟支持。在開啟 Service Worker 支持後，生產模式下構建的結果中就可以看到一個額外的 Chunk：

其中，ngsw-manifest.json 為 Web App Manifest，用於定義應用中使用到的資源；sw-register.[hash].bundle.js 為 Service Worker 的註冊代碼；worker-basic.min.js 為使用 Service Worker 所運行的腳本。

通常，使用上述技術的應用也被稱為 Progress Web App，或簡稱 PWA。

相關鏈接

• Angular CLI 增加 Service Worker 支持的 Commit：feat(aio): support @angular/service-worker using the CLI generated se… · angular/angular@920b3d2
• Angular CLI 配置文件的 Schema：https://github.com/angular/angular-cli/blob/master/packages/@angular/cli/lib/config/schema.json
• Web App Manifest 的 MDN 介紹：Web App Manifest
• Service Worker 的 MDN 介紹：Service Worker API
• PWA（Buzzword）的 Google 介紹：https://developers.google.com/web/progressive-web-apps/

推薦閱讀：