Angular 5配置使用service-worker

Angular 5实现了一个适用于Angular应用的Service Worker，Angular CLI 1.6也添加了对service worker的支持。

使用Angular CLI对应用添加service worker的支持分两种情况：

1. 新项目应用中添加service worker
2. 在已有项目中添加service worker

新项目应用添加servcie worker

使用Angular CLI在新建项目时可以使用--service-worker，很简单就可以让新项目添加对service-worker的支持。

ng new swdemo --service-worker

使用--service-worker，ng会帮我们自动的配置好service-worker。与service worker相关的变化如下：

1、package.json新增了@angular/service-worker

"@angular/service-worker": "^5.0.0",

2、ng会在.angular-cli.json文件的apps[0]节点添加如下：

{
...
"apps": [
   ...
   "serviceWorker": true
  }
 ],
...
}

3、app.module.ts引入了ServiceWorkerModule，代码如下：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ServiceWorkerModule } from '@angular/service-worker';
import { AppComponent } from './app.component';
import { environment } from '../environments/environment';

@NgModule({
 declarations: [
  AppComponent
 ],
 imports: [
  BrowserModule,
  environment.production ? ServiceWorkerModule.register('/ngsw-worker.js') : []
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

当环境变量为production时才注册ServiceWorkerModule。注册方式：

ServiceWorkerModule.register('/ngsw-worker.js') : []

4、在src下新建了用于service worker的ngsw-config.json文件，内容如下：

{
 "index": "/index.html",
 "assetGroups": [{
  "name": "app",
  "installMode": "prefetch",
  "resources": {
   "files": [
    "/favicon.ico",
    "/index.html"
   ],
   "versionedFiles": [
    "/*.bundle.css",
    "/*.bundle.js",
    "/*.chunk.js"
   ]
  }
 }, {
  "name": "assets",
  "installMode": "lazy",
  "updateMode": "prefetch",
  "resources": {
   "files": [
    "/assets/**"
   ]
  }
 }]
}

这个文件用来配置控制service worker缓存文件及数据。

已有项目添加service worker

可以按照上面新建项目的相关改变对已有项目进行修改。

1、安装@angular/service-worker

npm install @angular/service-worker --save

2、在.angular-cli.json添加”serviceWorker”=true配置

ng set apps.0.serviceWorker=true

3、app.module.ts引入了ServiceWorkerModule，参照新建项目的例子。

4、添加用于service worker的src/ngsw-config.json文件，参照新建项目的例子。

构建

使用ng构建生产环境的产品包时就可以报service-worker打包进去。如：

ng build --prod