未为在 SPA 上创建的 PWA 调用“beforeinstallprompt”事件答案

【问题标题】：'beforeinstallprompt' event not called for the PWA created on a SPA未为在 SPA 上创建的 PWA 调用“beforeinstallprompt”事件
【发布时间】：2020-04-17 12:17:55
【问题描述】：

我有一个 SPA 说 https://www.example.com。并且可以将其中一个子页面 https://www.example.com/foo 添加为 PWA。从主页导航到/foo 时，manifest 和 service-worker 已正确安装和注册，并且 PWA 也可以从 A2HS 本机按钮安装，但事件 beforeinstallprompt 不会在 chrome 上调用。如果页面/foo 被刷新，则调用该事件。只有当导航发生在另一个不在 PWA 范围内的页面时。灯塔审计也通过了/foo 上的所有测试。有没有人尝试过在一个 SPA 上创建多个 PWA，或者遇到过类似的问题？

【问题讨论】：

我在使用 Gatsby.js 时遇到了同样的问题 - 你找到解决方案了吗？
我最近重试了，效果很好，可能是chrome浏览器修复了一些问题。

标签： google-chrome service-worker progressive-web-apps manifest.json

【解决方案1】：

我不认为这是一个好的解决方案，但这就是我在 Gatsby.js 网站上解决它的方法：

在每个页面上（即使是那些我没有“添加到主页”自定义触发器的页面），我都会监听beforeinstallprompt 事件。
我为具有“添加到主页”自定义触发器的页面上的 <html> 元素上的自定义事件设置了一个侦听器。
当beforeinstallprompt 触发时，我使用jQuery 的$.data() 在<html> 标记上存储对事件的引用（这不会在我的SPA 页面之间换出） - 我无法获得普通JavaScript @ 987654326@ 可以工作，但我可能用错了，无论如何我都加载了 jQuery。
在beforeinstallprompt 处理程序中，设置数据后，我在<html> 元素上触发自定义事件。
具有“添加到主页”自定义触发器的页面捕获此自定义事件，从$( 'html ').data( 'event' ) 中获取对beforeinstallprompt 事件的引用并照常处理。

希望对您有所帮助；感觉很老套，但我对 PWA/SPA/React 还是很陌生！

【讨论】：