使用按钮将移动 Web 应用程序添加到主屏幕答案

【问题标题】：Adding mobile web app to home screen using button使用按钮将移动 Web 应用程序添加到主屏幕
【发布时间】：2018-10-12 18:43:50
【问题描述】：

我正在尝试通过位于我的 HTML5 移动网络应用的“设置”页面中的按钮将应用添加到主屏幕（注意：如果我尝试通过 Chrome 菜单添加它，它会起作用）。

我已经设置了所有这些步骤：

不得已安装 PWA
Web 应用程序必须包含 Web 应用程序清单。
Web 应用程序必须通过安全的 HTTPS 连接提供服务。
Web 应用已向 fetch 事件处理程序注册了一个服务工作线程。

目前我正在通过 Chrome 开发工具对其进行调试，并使用官方文档中的代码收听 beforeinstallprompt。

<script>
let deferredPrompt;

window.addEventListener('beforeinstallprompt', function(event) {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
});

// Installation must be done by a user gesture! Here, the button click
btnAdd.addEventListener('click', (e) => {
  // hide our user interface that shows our A2HS button
  btnAdd.style.display = 'none';
  // Show the prompt
  deferredPrompt.prompt();
  // Wait for the user to respond to the prompt
  deferredPrompt.userChoice
    .then((choiceResult) => {
      if (choiceResult.outcome === 'accepted') {
        console.log('User accepted the A2HS prompt');
      } else {
        console.log('User dismissed the A2HS prompt');
      }
      deferredPrompt = null;
    });
});

</script>

如何捕捉/home 页面上的事件，并将其传递给/settings 页面，以便我可以通过(onClick) 事件触发事件？

目前我正在使用：
Angular CLI：6.1.4
节点：8.11.4
操作系统：win32 x64

【问题讨论】：

您的清单是否包含以下内容：short_name、name、start_url、大小为 192x192 的图标？您有所有其他应用程序要求，但用户方面还有另一个要求：至少接受两次访问，两次访问之间至少有 5 分钟的差异。为了让选项出现。 link
是的，一切都设置正确。我尝试运行 Lighthouse，结果“可以提示用户安装 Web 应用程序”，所以我想这没问题。我的问题是如何在两个不同的页面之间传递这些事件。
在/settings页面上使用deferredPrompt.prompt()不就是一个问题吗？

标签： javascript angular service-worker progressive-web-apps

【解决方案1】：

将其保存到全局 (window) 对象（或具有全局访问权限的其他位置）和事件处理程序调用 window.deferredPrompt.prompt() 中的 /settings 页面上？

【讨论】：