使用按钮将移动Web应用添加到主屏幕

Question

I'm trying to add app to home screen via button located in "settings" page of my HTML5 mobile web app (Notice: It is working if I'm trying to add it via Chrome menu).

I've set up all of these steps:

• The PWA must not already be installed
• Web app must include a web app manifest.
• Web app must be served over a secure HTTPS connection.
• Web app has registered a service worker with a fetch event handler.

Currently I'm debugging it via Chrome Dev tools and listening to beforeinstallprompt with that code from official docs.

<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>

How to catch event on /home page, and pass it to /settings page so I could fire the event via (onClick) event?

Currently I'm using:
Angular CLI: 6.1.4
Node: 8.11.4
OS: win32 x64

Answer 1

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