从 5.0.0 版本开始,Angular 附带了一个 Service Worker 实现。 Angular 开发人员可以利用这个 service worker 并从其提供的更高的可靠性和性能中受益,而无需针对低级 API 编写代码。
这个实现就是 SAP 电商云 Spartacus UI package.json 中提到的依赖 @angular/pwa
:
Angular 的 Service Worker 旨在优化最终用户在缓慢或不可靠的网络连接上使用应用程序的体验,同时最大限度地降低提供过时内容的风险。
为此,Angular Service Worker 遵循以下准则:
为了支持这些行为,Angular Service Worker 从服务器加载一个清单文件。 该文件名为 ngsw.json,描述要缓存的资源并包含每个文件内容的哈希值。 当部署应用程序更新时,清单的内容会发生变化,通知 Service Worker 应该下载并缓存应用程序的新版本。 此清单是从名为 ngsw-config.json 的 CLI 生成的配置文件生成的。
Spartacus 的 ngsw-config.json 文件的内容如下:
{
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/*.css",
"/*.js",
"/manifest.webmanifest"
]
}
}
],
"dataGroups": [
{
"name": "basesites",
"urls": [
"*/basesites?fields=baseSites\\(uid,defaultLanguage\\(isocode\\),urlEncodingAttributes,urlPatterns,stores\\(currencies\\(isocode\\),defaultCurrency\\(isocode\\),languages\\(isocode\\),defaultLanguage\\(isocode\\)\\),theme,defaultPreviewCatalogId,defaultPreviewCategoryCode,defaultPreviewProductCode\\)*"
],
"cacheConfig": {
"maxSize": 1,
"maxAge": "1d",
"strategy": "performance"
}
}
]
}
安装 Angular Service Worker 就像包含一个 NgModule 一样简单。 除了向浏览器注册 Angular Service Worker 之外,这还使得一些服务可用于注入,这些服务与 Service Worker 交互并可以用来控制它。 例如,应用程序可以要求在有新更新可用时得到通知,或者应用程序可以要求 Service Worker 检查服务器是否有可用更新。