Angular 5配置使用service-worker
Angular 5实现了一个适用于Angular应用的Service Worker，Angular CLI 1.6也添加了对service worker的支持。
使用Angular CLI对应用添加service worker的支持分两种情况：
- 新项目应用中添加service worker
- 在已有项目中添加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
