Spartacus 添加 PWA 应用到 home 的实现原理分析

代码位置：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等。
   • 在类的构造函数中，通过依赖注入获得了PWAModuleConfig、GlobalMessageService和WindowRef等实例，这些将在后续代码中使用。

2. AddToHomeScreenService类定义：

   • 通过@Injectable装饰器，将这个类标记为一个可注入的服务，可以在整个应用中使用。
   • 定义了一个受保护的成员变量deferredEvent，用于存储beforeinstallprompt事件对象。
   • 定义了一个canPrompt的BehaviorSubject，用于跟踪是否可以提示用户添加到主屏幕。
   • 声明了一个canPrompt$的Observable，提供了对canPrompt状态的订阅。

3. 构造函数：

   • 构造函数接受PWAModuleConfig、GlobalMessageService和WindowRef等依赖。
   • 在构造函数内部，如果配置中启用了addToHomeScreen功能（通过this.config.pwa?.addToHomeScreen的判断），则调用init()方法。

4. init()方法：

   • 在初始化方法中，通过this.winRef.nativeWindow判断浏览器是否提供了nativeWindow对象。
   • 如果提供了，通过addEventListener绑定了beforeinstallprompt和appinstalled事件的处理函数。
   • 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 是一种可以像原生应用程序一样在用户的设备上安装和运行的网页应用程序。

首先，服务在根注入器中提供，这意味着这个服务在应用程序的整个生命周期中是单例的。它依赖于 PWAModuleConfig，GlobalMessageService 和 WindowRef。PWAModuleConfig 似乎是用于配置 PWA 模块的服务；GlobalMessageService 用于全局消息通知；WindowRef 是对全局 window 对象的引用，以便进行跨浏览器的兼容处理。

这个服务中有一个名为 canPrompt 的 BehaviorSubject，它是一个可以发送和接收数据的对象，用于存储当前是否可以提示用户添加应用到主屏幕。同时提供了一个名为 canPrompt$ 的 Observable，其他组件可以订阅这个 Observable 来获知是否可以提示用户添加应用到主屏幕。

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

在初始化函数 init 中，服务监听了两个全局事件：beforeinstallprompt 和 appinstalled。beforeinstallprompt 事件是在用户可以被提示添加应用到主屏幕之前触发的。当这个事件发生时，服务会阻止事件的默认行为，存储事件对象以便稍后触发，然后调用 enableAddToHomeScreen 函数来允许提示用户。appinstalled 事件在用户将应用添加到主屏幕后触发。当这个事件发生时，服务会发送一条全局消息通知用户应用已经被添加到主屏幕，然后调用 disableAddToHomeScreen 函数禁止进一步的提示，并清除存储的事件对象。

服务还提供了 firePrompt 函数，这个函数会触发存储的 beforeinstallprompt 事件的 prompt 方法，这将显示向用户添加应用到主屏幕的提示。