PWA：如何在installinstallprompt之前重新启动？

Question

我们的网站使用PWA，以便访问者可以选择添加到主屏幕（A2HS）。但是，根据Google Analytics数据，与验收率相比，解雇率过高。

我们计划使用户体验更直观，更清晰，以提高接受率。但是，我们也希望重振那些已经驳回A2HS对话框的访问者。

怎么做？据我所知，我们只能添加beforeinstallprompt侦听器，但没有openinstallprompt方法。

Answer 1

不，您无法触发安装横幅及其由浏览器驱动。如果您的站点符合所有PWA标准，并且用户访问的频率非常高（浏览器供应商没有明确说明的频率），浏览器将再次显示提示。我们的代码不能触发相同的内容。 Refer this answer关于它为什么表现这种方式，以及替代解决方案。

Answer 2

Anand的答案现在是正确的。但是启动Chrome 68后，Chrome将不会自动显示A2HS提示。您需要明确告诉Chrome触发提示。

根据Google的文档，以下是处理提示的代码片段;

倾听beforeinstallprompt

let deferredPrompt;

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

将以下代码插入将触发提示

的侦听器中

// 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;
});

有关详细信息，请参阅this link。

Answer 3

出于安全原因，正如其他人所写，浏览器不允许您手动触发安装事件。

但是，有一种方法可以自己测试。转到chrome：// flags并启用“绕过用户参与度检查”

这将启动提示，以便您进行测试。

干杯

Answer 4

在开发模式，

在 devtools（在 chrome 中试过）控制台中试试这个来触发事件：

event = new Event('beforeinstallprompt')
window.dispatchEvent(event)

注意：我们将无法通过在事件中调用 prompt 来打开浏览器内模式。