Angular 5 引入了 Angular 服务工作者(Angular Service Worker)的重大变化,该变化主要包括以下几个方面:
@angular/service-worker
应用插件:Angular 5 引入了一个新的 @angular/service-worker
应用插件,用于简化服务工作者的配置和部署过程。安装 @angular/service-worker
插件:
npm install @angular/service-worker --save
ngsw-config.json
文件:服务工作者的配置文件从 ngsw-manifest.json
更名为 ngsw-config.json
,并且支持更多的配置选项。示例 ngsw-config.json
文件:
{
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html"
],
"versionedFiles": [
"/*.bundle.css",
"/*.bundle.js",
"/*.chunk.js"
]
}
}
],
"dataGroups": [
{
"name": "api",
"urls": [
"/api/**"
],
"cacheConfig": {
"strategy": "freshness",
"maxSize": 100,
"maxAge": "3d",
"timeout": "10s"
}
}
]
}
@angular/cli
命令行工具支持:Angular CLI 现在支持在构建过程中自动配置和生成服务工作者所需的文件。使用 Angular CLI 构建带有服务工作者的应用:
ng build --prod
app.module.ts
)中手动注册服务工作者。手动注册服务工作者的代码示例:
import { NgModule } from '@angular/core';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
@NgModule({
imports: [
ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production })
],
// ...
})
export class AppModule { }
这些是 Angular 服务工作者部署的重大变化以及相应的代码示例。请注意,具体的部署过程可能因应用的具体需求而有所不同,建议参考官方文档和相关教程进行详细配置和部署。