Angular 里的 Service Worker
2022/8/4 23:23:08
本文主要是介绍Angular 里的 Service Worker,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
从 5.0.0 版本开始,Angular 附带了一个 Service Worker 实现。 Angular 开发人员可以利用这个 service worker 并从其提供的更高的可靠性和性能中受益,而无需针对低级 API 编写代码。
这个实现就是 SAP 电商云 Spartacus UI package.json 中提到的依赖 @angular/pwa
:
Angular 的 Service Worker 旨在优化最终用户在缓慢或不可靠的网络连接上使用应用程序的体验,同时最大限度地降低提供过时内容的风险。
为此,Angular Service Worker 遵循以下准则:
-
缓存应用程序就像安装本机应用程序。 应用程序被缓存为一个单元,所有文件一起更新。
-
正在运行的应用程序继续使用所有文件的相同版本运行。 它不会突然开始从可能不兼容的较新版本接收缓存文件。
-
当用户刷新应用程序时,他们会看到最新的完全缓存版本。 新选项卡加载最新的缓存代码。
-
更新发生在后台,在发布更改后相对较快。 在安装并准备好更新之前,会提供应用程序的先前版本。
-
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 检查服务器是否有可用更新。
这篇关于Angular 里的 Service Worker的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-09flutter3.x_macos桌面os实战
- 2024-05-09Rust中的并发性:Sync 和 Send Traits
- 2024-05-08使用Ollama和OpenWebUI在CPU上玩转Meta Llama3-8B
- 2024-05-08完工标准(DoD)与验收条件(AC)究竟有什么不同?
- 2024-05-084万 star 的 NocoDB 在 sealos 上一键起,轻松把数据库编程智能表格
- 2024-05-08Mac 版Stable Diffusion WebUI的安装
- 2024-05-08解锁CodeGeeX智能问答中3项独有的隐藏技能
- 2024-05-08RAG算法优化+新增代码仓库支持,CodeGeeX的@repo功能效果提升
- 2024-05-08代码报错不用愁,CodeGeeX一键完成代码修复、错误解释的功能上线了!
- 2024-05-08今天开始程序员不用再发愁写commit message了,全部由CodeGeeX自动完成!