延迟 Web 安装横幅

Question

根据 developers.google.com 可以延迟 Web 应用程序安装横幅，但我只能完全取消它。

window.addEventListener('beforeinstallprompt', function(e) {
  console.log('beforeinstallprompt Event fired');
  e.preventDefault();
  return false;
});

一个用例是将提示推迟到页面生命周期的后期，例如在用户执行操作或点击页面底部之后（表明他们正在与您的网站互动） .

如何推迟网络应用横幅？

Answer 1

尝试查看此documentation，如果它对您有帮助。

这是用于延迟提示的完整代码。

var deferredPrompt;

window.addEventListener('beforeinstallprompt', function(e) {
  console.log('beforeinstallprompt Event fired');
  e.preventDefault();

  // Stash the event so it can be triggered later.
  deferredPrompt = e;

  return false;
});

btnSave.addEventListener('click', function() {
  if(deferredPrompt !== undefined) {
    // The user has had a postive interaction with our app and Chrome
    // has tried to prompt previously, so let's show the prompt.
    deferredPrompt.prompt();

    // Follow what the user has done with the prompt.
    deferredPrompt.userChoice.then(function(choiceResult) {

      console.log(choiceResult.outcome);

      if(choiceResult.outcome == 'dismissed') {
        console.log('User cancelled home screen install');
      }
      else {
        console.log('User added to home screen');
      }

      // We no longer need the prompt.  Clear it up.
      deferredPrompt = null;
    });
  }
});

有关详细信息，另请查看此 link。

Answer 2

我使用 Chrome 76，但无法与其他（较旧的）答案一起使用。我查看了 Chrome java 脚本调试器，发现需要改用以下内容：

var deferredPrompt;

$(window).on('beforeinstallprompt', function(e) {
    console.log('beforeinstallprompt Event fired');
    e.preventDefault();

    // Stash the event so it can be triggered later.
    deferredPrompt = e.originalEvent;

    return false;
});

*编辑：只有在使用jquery注册事件时才需要通过e.originalEvent获取事件。

延迟 Web 安装横幅

Defer Web Install Banner

javascript

progressive-web-apps