关于前端:Spartacus-添加-PWA-应用到-home-的实现原理分析

16次阅读

共计 2304 个字符,预计需要花费 6 分钟才能阅读完成。

代码地位:https://github.com/SAP/spartacus/blob/develop-6.4.x/projects/storefrontlib/cms-structure/pwa/services/add-to-home-screen.service.ts

这段 Angular 代码是一个用于增加到主屏幕(Add to Home Screen)性能的服务,它是为 Spartacus 我的项目中的 PWA 模块设计的。PWA 代表 Progressive Web App,是一种联合了网页和本地利用个性的 Web 应用程序。

该代码位于一个名为 AddToHomeScreenService 的可注入(Injectable)类中,该类提供了一系列性能来治理“增加到主屏幕”性能。上面将具体解释代码的各个局部及其性能。

  1. 模块导入和依赖注入

    • 通过 import 语句,引入了必要的 Angular 模块和 Spartacus 模块,包含 @angular/core@spartacus/core等。
    • 在类的构造函数中,通过依赖注入取得了 PWAModuleConfigGlobalMessageServiceWindowRef等实例,这些将在后续代码中应用。
  2. AddToHomeScreenService类定义

    • 通过 @Injectable 装璜器,将这个类标记为一个可注入的服务,能够在整个利用中应用。
    • 定义了一个受爱护的成员变量 deferredEvent,用于存储beforeinstallprompt 事件对象。
    • 定义了一个 canPromptBehaviorSubject,用于跟踪是否能够提醒用户增加到主屏幕。
    • 申明了一个 canPrompt$Observable,提供了对 canPrompt 状态的订阅。
  3. 构造函数

    • 构造函数承受 PWAModuleConfigGlobalMessageServiceWindowRef等依赖。
    • 在构造函数外部,如果配置中启用了 addToHomeScreen 性能(通过 this.config.pwa?.addToHomeScreen 的判断),则调用 init() 办法。
  4. init()办法

    • 在初始化办法中,通过 this.winRef.nativeWindow 判断浏览器是否提供了 nativeWindow 对象。
    • 如果提供了,通过 addEventListener 绑定了 beforeinstallpromptappinstalled事件的处理函数。
    • beforeinstallprompt事件处理函数阻止了默认行为,并将事件对象存储到 deferredEvent 中,而后调用 enableAddToHomeScreen() 办法。
    • appinstalled事件处理函数会在应用程序被胜利装置后触发,显示确认音讯后,调用 disableAddToHomeScreen() 办法将 canPrompt 设置为 false,并将deferredEvent 重置为null
  5. 其余办法

    • enableAddToHomeScreen()办法将 canPrompt 的值设置为true,示意能够提醒用户增加到主屏幕。
    • disableAddToHomeScreen()办法将 canPrompt 的值设置为false,示意不再提醒用户增加到主屏幕。
    • firePrompt()办法会查看 deferredEvent 是否存在,如果存在,则调用 prompt() 办法来触发“增加到主屏幕”的提醒。

这段代码是 Angular 服务,名称为 AddToHomeScreenService,次要用于解决 PWA(Progressive Web App)的增加到主屏幕的性能。PWA 是一种能够像原生应用程序一样在用户的设施上装置和运行的网页应用程序。

首先,服务在根注入器中提供,这意味着这个服务在应用程序的整个生命周期中是单例的。它依赖于 PWAModuleConfigGlobalMessageServiceWindowRefPWAModuleConfig 仿佛是用于配置 PWA 模块的服务;GlobalMessageService 用于全局音讯告诉;WindowRef 是对全局 window 对象的援用,以便进行跨浏览器的兼容解决。

这个服务中有一个名为 canPromptBehaviorSubject,它是一个能够发送和接收数据的对象,用于存储以后是否能够提醒用户增加利用到主屏幕。同时提供了一个名为 canPrompt$Observable,其余组件能够订阅这个 Observable 来获知是否能够提醒用户增加利用到主屏幕。

在服务的 constructor 构造函数中,查看了 PWAModuleConfig 中的 pwa.addToHomeScreen 配置。如果此配置为真,服务将初始化其性能。

在初始化函数 init 中,服务监听了两个全局事件:beforeinstallpromptappinstalledbeforeinstallprompt 事件是在用户能够被提醒增加利用到主屏幕之前触发的。当这个事件产生时,服务会阻止事件的默认行为,存储事件对象以便稍后触发,而后调用 enableAddToHomeScreen 函数来容许提醒用户。appinstalled 事件在用户将利用增加到主屏幕后触发。当这个事件产生时,服务会发送一条全局音讯告诉用户利用曾经被增加到主屏幕,而后调用 disableAddToHomeScreen 函数禁止进一步的提醒,并革除存储的事件对象。

服务还提供了 firePrompt 函数,这个函数会触发存储的 beforeinstallprompt 事件的 prompt 办法,这将显示向用户增加利用到主屏幕的提醒。

正文完
 0