Angular|Angular 里的 Service Worker
从 5.0.0 版本开始,Angular 附带了一个 Service Worker 实现。 Angular 开发人员可以利用这个 service worker 并从其提供的更高的可靠性和性能中受益,而无需针对低级 API 编写代码。
【Angular|Angular 里的 Service Worker】这个实现就是 SAP 电商云 Spartacus UI package.json 中提到的依赖 @angular/pwa
:
文章图片
Angular 的 Service Worker 旨在优化最终用户在缓慢或不可靠的网络连接上使用应用程序的体验,同时最大限度地降低提供过时内容的风险。
为此,Angular Service Worker 遵循以下准则:
- 缓存应用程序就像安装本机应用程序。 应用程序被缓存为一个单元,所有文件一起更新。
- 正在运行的应用程序继续使用所有文件的相同版本运行。 它不会突然开始从可能不兼容的较新版本接收缓存文件。
- 当用户刷新应用程序时,他们会看到最新的完全缓存版本。 新选项卡加载最新的缓存代码。
- 更新发生在后台,在发布更改后相对较快。 在安装并准备好更新之前,会提供应用程序的先前版本。
- Service Worker 会尽可能节省带宽。 仅当资源发生更改时才会下载资源。
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 检查服务器是否有可用更新。
推荐阅读
- 关于|关于 Angular PWA 应用中的 ngsw.json 文件
- Angular|Angular 应用要启用 Service Worker 所需满足的一些前提条件
- 落在时光村子里的往事
- English|Pony.ai's Robotaxi Service Available on Cao Cao Travel
- 《权力的游戏》(细数冰火世界里的真善美)
- 平安夜(故事的结局,你依旧是盛开在诗里的小黄花)
- 初恋是我青春里的一场兵荒马乱
- 小区里的“玫金色”
- 平凡食物里的百味人生——漫画《深夜食堂》读后感
- 投稿|困在抖音围城里的旅行社