Angular 应用要启用 Service Worker 所需满足的一些前提条件

简介: Angular 应用要启用 Service Worker 所需满足的一些前提条件

要使用 Angular 服务工作者的所有功能,请使用最新版本的 Angular 和 Angular CLI。


当前 SAP 电商云 Spartacus UI 使用的 Angular 版本:^13.3.0

7330abd6f1bfbec9e562aea1ec6782b2 (1).png

要注册 Service Worker,必须通过 HTTPS 而不是 HTTP 访问应用程序。 浏览器会忽略通过不安全连接提供服务的页面上的服务工作者。 原因是 Service Worker 提供了强大的 HTTP 请求拦截功能,因此需要格外小心以确保 Service Worker 脚本没有被篡改。


这条规则有一个例外:为了使本地开发更直接,浏览器在访问 localhost 上的应用程序时不需要安全连接。


要从 Angular Service Worker 中受益,Angular 应用程序必须在通常支持 Service Worker 的 Web 浏览器中运行。 目前,最新版本的 Chrome、Firefox、Edge、Safari、Opera、UC 浏览器(Android 版)和三星互联网都支持 Service Worker。 IE 和 Opera Mini 等浏览器不支持 service worker。


如果用户使用不支持 Service Worker 的浏览器访问 Angular 应用程序,则 Service Worker 没有注册,并且不会发生离线缓存管理和推送通知等相关行为。 进一步来说:


浏览器不会下载 service worker 脚本和 ngsw.json 清单文件


主动尝试与 service worker 交互,例如调用 SwUpdate.checkForUpdate() 的行为,均会返回被拒绝的 Promise


相关服务的可观察事件,例如 SwUpdate.available 不会被触发


Angular 官方强烈建议开发人员确保,即使在浏览器中没有 service worker 支持的情况下您的应用程序也能正常工作。 尽管不受支持的浏览器会忽略 Service Worker 缓存,但如果应用程序尝试与 Service Worker 交互,它仍会报告错误。 例如,调用 SwUpdate.checkForUpdate() 返回被拒绝的 Promise. 为避免在 Chrome 开发者工具 console 面板观察到此类错误消息,请检查是否使用 SwUpdate.isEnabled 启用了 Angular Service Worker.

35e678bdfa8b6c5e02a7459b622fff81.png


目录
相关文章
|
3月前
|
缓存 前端开发 JavaScript
Angular Service Worker 在 PWA 应用 HTTP 交互中扮演的角色
Angular Service Worker 在 PWA 应用 HTTP 交互中扮演的角色
45 0
|
7月前
|
Web App开发 缓存 安全
Angular 应用要启用 Service Worker 所需满足的一些前提条件
Angular 应用要启用 Service Worker 所需满足的一些前提条件
56 2
|
7月前
|
缓存 API
Angular 里的 Service Worker
从 5.0.0 版本开始,Angular 附带了一个 Service Worker 实现。 Angular 开发人员可以利用这个 service worker 并从其提供的更高的可靠性和性能中受益,而无需针对低级 API 编写代码。
52 0
|
7月前
|
存储 JavaScript API
如何使用 Angular 服务器端渲染的 Transfer State Service
如何使用 Angular 服务器端渲染的 Transfer State Service
51 0
|
12月前
|
资源调度 前端开发 Java
使用Angular CDK实现一个Service弹出Toast组件
使用Angular CDK实现一个Service弹出Toast组件
87 0
为 Angular service 注册 provider 的三种方式
为 Angular service 注册 provider 的三种方式
206 0
为 Angular service 注册 provider 的三种方式
|
测试技术
对具有外部依赖的Angular服务类(service class)进行单元测试的几种方式
对具有外部依赖的Angular服务类(service class)进行单元测试的几种方式
122 0
对具有外部依赖的Angular服务类(service class)进行单元测试的几种方式
|
JavaScript
Angular Service依赖注入的一个具体例子
Angular Service依赖注入的一个具体例子
104 0
Angular Service依赖注入的一个具体例子
如何在Angular项目里创建新的Service
如何在Angular项目里创建新的Service
169 0
如何在Angular项目里创建新的Service
|
JavaScript
Angular Service依赖注入的一个具体例子
Angular Service依赖注入的一个具体例子
Angular Service依赖注入的一个具体例子