使用按钮

时间:2018-10-12 18:43:50

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

我正在尝试通过HTML5移动网络应用程序“设置”页面上的按钮将应用程序添加到主屏幕(注意:如果我想通过Chrome菜单添加应用程序,则可以使用。)

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

  • 必须尚未安装PWA
  • 网络应用程序必须包含网络应用程序清单。
  • 必须通过安全的HTTPS连接为Web应用提供服务。
  • Web应用已使用获取事件处理程序注册了服务工作者。

目前,我正在通过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

1 个答案:

答案 0 :(得分:0)

将其保存到全局(window)对象(或具有全局访问权限的其他位置)中,以及在事件处理程序调用{​​{1}}的{​​{1}}页面上吗?