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

Question

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

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

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

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

2020 编辑：是的，这在 Chrome 中是可能的 - 请参阅 answer below

查看这篇精彩的文章：How to provide your own in-app install experience 和 my working demo 的文章进程 applied in a React app。

或者对于稍微不同的方法，请参阅how snapdrop.net did it。

Answer 1

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

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

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

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

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

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

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

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

Answer 2

在 Android 上的移动 Chrome 中，可以从浏览器的菜单中访问“添加到主屏幕”。 （Android/iOS 上的移动 Safari/Firefox 也可能存在类似选项。）读取 Web 应用程序清单文件并添加应用程序，就像使用原始提示功能一样。

虽然 JavaScript 不能用于手动调用提示，但一种解决方法是提供屏幕说明，向用户展示如何手动打开菜单并为其特定用户代理添加。

Answer 3

浏览器现在触发的一些事件有助于处理 PWA 的安装问题。它还不是网络标准，但它是一个很好的方法。

• 'beforeinstallprompt' 在提示显示之前触发，并且
• 'appinstalled' 在安装完成后立即触发。

因此，您可以拦截 'beforeinstallprompt' 事件，防止它发生以使横幅不显示，在您希望横幅显示时将其隐藏，最后创建一个用户单击然后触发的按钮较早的延迟事件随意。

以下是有关如何实现此目的的链接：

https://web.dev/installable/discover-installable/codelab-make-installable

Answer 4

好吧，没有什么可以阻止您将 deferredPrompt 值存储在变量中并在以后使用它。然后你可以弹出一个自定义框，如果用户关闭它，你仍然没有运行 deferredPrompt.prompt() 并且可以稍后使用它。我将我的存储在 Redux 中。如果用户关闭了安装提示，我随时使用汉堡菜单中的 deferredPrompt 来安装它。

按提示收听安装和存储事件

 const beforeInstallListener = e => {
        // Prevent Chrome 76 and later from showing the install prompt
        e.preventDefault();
        // Stash the event so it can be triggered later.
        dispatch(setAndroidDeferredPrompt(e));
        dispatch(showAndroidPromptDownload(true));
    };
    window.addEventListener("beforeinstallprompt", beforeInstallListener);

创建一个使用该 deferredPrompt 提示用户的函数

    const installToAndroid = async () => {
    dispatch(showAndroidPromptDownload(false));
    deferredPrompt.prompt(); // Wait for the user to respond to the prompt
    const choiceResult = await deferredPrompt.userChoice;

    if (choiceResult.outcome === "accepted") {
        console.log("User accepted the PWA prompt");
    } else {
        closeAndroidPromptWithoutDownload();
        console.log("User dismissed the PWA prompt");
    }
    dispatch(setAndroidDeferredPrompt(null));
};

请记住，如果用户单击要安装的横幅，则会调用 deferredPrompt.prompt() 并且它不再起作用。因此，我会检查 deferredPrompt 是否存在，如果用户调用了 .prompt()，请记住将其设置为 null。

{deferredPrompt && <button onClick={() => installPWA(deferredPrompt)}>Installer til hjemskjerm</button>}

这是通过 React Hooks、Redux 和 LocalStorage（我存储 pwa.reducer.js 状态）完成的

Answer 5

感谢所有出色的答案。最近似乎事情变得更加标准化，并且有一种可靠的方法至少在 chrome 中允许用户点击并安装应用程序，即使他们错过了提示等。

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

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 是可安装的，并提供一个按钮或其他元素来启动应用内安装流程。

有关更多详细信息和其他功能，请参阅the full article。

我做了一个working demo of a this process implemented in React。 (source code)

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

Answer 6

如果你接受外部服务，我碰到了https://progressier.com。这是一项帮助您为您的 web 应用程序创建 pwa 的服务，通过：

1. 填写表格
2. 上传 512px 图标

由于我知道如何创建 PWA，我只是在测试，所以我记得以下内容：

• 普通 PWA 将让浏览器处理交互，众所周知，这几乎不引人注意
• 因此需要一个“安装我”按钮，但需要对您的跨浏览器 javascript 有信心
• 欢迎使用安装计数器

Progressier.com 对此提供了解决方案。为 PWA、PWA 安装按钮和 PWA 安装计数器生成代码尖峰。

限制：免费服务仅限于 50k 浏览量。

来源

• I built a tool that makes building a PWA much easier

Answer 7

在开发模式下，

在 devtools 控制台试试这个来触发事件：

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