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

Question

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

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

有没有一行javascript可以随时调用安装提示banner？？例如，我可以添加到隐藏在帮助屏幕中的安装按钮中吗？

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

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

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

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

标签： javascriptservice-workerprogressive-web-apps

Answer 1

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

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

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

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

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

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

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

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