是否可以制作触发 PWA“添加到主屏幕”安装横幅的应用内按钮？

Question

我了解，使用正确制作的渐进式 Web 应用程序，移动浏览器将显示一条横幅，提示用户在其主屏幕上“安装”该应用程序。

我一直在寻找一种从应用程序内触发该提示的方法，但一直找不到任何东西。

有没有一行JavaScript可以用来随时调用安装提示横幅？？例如，我可以将某些东西添加到隐藏在帮助屏幕中的安装按钮中？

如果某些用户错过了安装横幅提示，他们可能很难找到“添加到主屏幕”选项。我想给他们一个按钮，他们可以单击以再次收到提示。

2020 年编辑：是的，这在 Chrome 中是可能的 - 请参阅 下面的答案

请参阅这篇很棒的文章： 如何提供您自己的应用内安装体验 以及我 在 React 应用 中应用文章过程的 工作演示。

或者对于稍微不同的方法，请参阅 snapdrop.net 是如何做到 的。

原文由 Adam D 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

感谢所有伟大的答案。最近看起来事情变得更加标准化，并且 至少在 chrome 中 有一种可靠的做事方式，即使用户错过了提示等，也允许用户单击并安装应用程序。

Pete LePage 在 web.dev 上写了一篇非常清晰的文章，名为 How to provide your own in-app install experience 其中详细介绍了该过程。代码片段和过程直接取自文章。

1. 监听 beforeinstallprompt 事件。

 let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent the mini-infobar from appearing on mobile
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI notify the user they can install the PWA
  showInstallPromotion();
});

1. 保存 beforeinstallprompt 事件，以便稍后可以使用它来触发安装流程。

 buttonInstall.addEventListener('click', (e) => {
  // Hide the app provided install promotion
  hideMyInstallPromotion();
  // Show the install 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 install prompt');
    } else {
      console.log('User dismissed the install prompt');
    }
  });
});

1. 提醒用户您的 PWA 是可安装的，并提供一个按钮或其他元素来启动应用内安装流程。

有关更多详细信息和其他功能，请参阅 完整文章。

我做了一个 在 React 中实现的这个过程的工作演示。 （ 源代码）

此外，对于稍微不同的方法，您可以看到 Snapdrop 的制造商如何在 源代码 中实现安装按钮。

原文由 Adam D 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

Chrome（或任何支持 PWA 的浏览器） 触发 Web 应用程序安装横幅的 beforeinstallprompt 事件， 当您认为用户不会错过它/确信将您的网站添加到主页时，您可以在更合适的时间捕获并重新触发。从 Chrome 版本 68 开始，捕获 beforeinstallprompt 并以编程方式处理安装提示是强制性的，并且不会自动显示横幅。

如果用户错过了提示/拒绝添加到主屏幕，则我们的代码无法手动触发该事件。这是故意保留的方式，以避免网页烦扰用户反复提示用户添加到主屏幕。从用户的角度考虑，这是完全有道理的。

是的，在某些情况下，用户会不小心错过该选项，他可能不知道“添加到主屏幕”的浏览器菜单选项，我们再次触发该选项会很好。但不幸的是，这不是一种选择。至少现在，考虑到如果留给开发人员提示，开发人员会如何滥用，我个人认为这不会有太大变化。

替代选项： 如果用户错过了安装提示，甚至选择不将其安装到主屏幕，请给一些时间，当您认为他开始喜欢您的网站时（基于转化），您可以向他展示整页或半页页面 Div 弹出式安装说明，用于将您的站点从浏览器菜单添加到主屏幕。它可以有一些图像或 Gif 动画，向用户展示如何从菜单添加到主屏幕。这样一来，对于大多数用户（如果不是全部）来说，它应该是不言自明的。

这 是一些相同的代码示例，它是特定于 iOS 的（请查看#PROTIP 3）。

作为奖励，您可以在用户添加到主屏幕时显示一些促销信息，例如折扣或附加功能，这将说服用户这样做。 PWA 有一种方法可以确定站点是从主屏幕还是浏览器访问的。

对于开发/测试： 如果您出于开发/测试目的需要多次出现此横幅，您可以在 Chrome 中设置以下流程，

 chrome://flags/#bypass-app-banner-engagement-checks

原文由 Anand 发布，翻译遵循 CC BY-SA 4.0 许可协议