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

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

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


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


要注册 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.





相关文章
|
3月前
|
JavaScript 前端开发 架构师
Angular进阶:理解RxJS在Angular应用中的高效运用
RxJS(Reactive Extensions for JavaScript)是JavaScript的一个响应式编程库,特别适用于处理异步数据流。
49 0
|
3月前
|
JavaScript 前端开发
Angular.js 应用中数据模式的删除操作实现
Angular.js 应用中数据模式的删除操作实现
|
9天前
|
开发框架 前端开发 JavaScript
使用Angular构建大型企业级应用的技术探索
【8月更文挑战第11天】Angular凭借其强大的组件化开发能力、模块化系统、丰富的生态系统和静态类型检查特性,成为了构建大型企业级应用的理想选择。通过设计良好的架构、使用Angular CLI、组件化开发实践、合理利用服务、性能优化以及严格测试和调试等方法,可以高效地构建出高质量、可维护、可扩展的企业级应用。未来,随着Angular技术的不断发展和完善,相信它将在企业级应用开发领域发挥更加重要的作用。
|
3月前
|
存储 JavaScript 前端开发
Angular 应用 node_modules 子文件夹 @types 的作用介绍
Angular 应用 node_modules 子文件夹 @types 的作用介绍
|
2月前
|
JavaScript 前端开发 开发者
Angular框架:企业级Web应用的强大后盾
Angular,谷歌支持的JavaScript框架,因其组件化架构、双向数据绑定、依赖注入和路由系统,成为企业级Web开发首选。组件化促进代码重用,如`AppComponent`示例。双向数据绑定简化DOM操作,减少手动工作。依赖注入通过示例展示易管理依赖,提升测试性。路由则支持SPA开发,平滑页面过渡。Angular的特性增强了开发效率和应用质量,使其在Web开发领域保持领先地位。【6月更文挑战第25天】
36 2
|
3月前
|
前端开发 JavaScript 测试技术
使用Angular构建高效单页应用的实践指南
【5月更文挑战第21天】本文是使用Angular构建高效单页应用的实践指南,涵盖了Angular框架简介、SPA构建步骤和最佳实践。首先,Angular是基于TypeScript的前端框架,提供声明式模板、组件化和路由管理等功能。构建SPA包括环境搭建、创建组件、编写路由、数据绑定和交互,以及构建和部署。实践中,应遵循Angular风格指南,使用Angular Material UI库,实现服务端渲染,并进行性能优化和测试,以提升应用性能和用户体验。
|
3月前
|
JavaScript 前端开发
关于 Angular.js 应用里的 $scope.$apply()
关于 Angular.js 应用里的 $scope.$apply()
|
3月前
|
JavaScript 前端开发
Angular.js 应用里如何发送 HTTP 请求
Angular.js 应用里如何发送 HTTP 请求
|
3月前
|
资源调度 JavaScript 编译器
显式指定 npm 作为创建 Angular 应用时的包管理器
显式指定 npm 作为创建 Angular 应用时的包管理器
|
3月前
|
JavaScript 前端开发 开发者
【TypeScript技术专栏】TypeScript在Angular开发中的应用
【4月更文挑战第30天】本文探讨了TypeScript在Angular开发中的应用。Angular与TypeScript的结合利用了静态类型检查和ECMAScript特性,简化了大型Web应用的开发。文章涵盖组件、数据绑定、依赖注入、服务、守卫和路由以及模块化等方面,展示了如何在Angular中有效使用TypeScript。此外,还提到了TypeScript的高级应用,如泛型、高级类型和装饰器。掌握这些知识将有助于提升Angular应用的可维护性和可扩展性。
39 0