Question

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

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

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

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

Answer 1

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

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

是的，有些用户意外错过了该选项，他可能不知道浏览器菜单选项＆＃34;添加到主屏幕＆＃34;我们再次触发它会很好。但不幸的是，这不是一个选择。至少目前我个人并没有看到这种情况发生了很大变化，考虑到如果开发人员向开发人员提示，他们会如何滥用。

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

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

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

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

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

Answer 2

感谢所有出色的回答。最近看来，事情已经变得更加标准化，并且有一种可靠的操作方式，至少在chrome中可以做到，即使用户错过了提示等，也可以单击并安装应用程序。

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

收听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();
});

保存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');
    }
  });
});

警告用户您的PWA是可安装的，并提供按钮或其他元素以启动应用内安装流程。

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

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

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

Answer 3

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

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

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

在开发模式，

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

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

Answer 6

浏览器现在触发了一些事件，这些事件有助于解决PWA的安装问题。这不是Web标准的YET，但这是一个好方法。

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

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

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

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

Answer 7

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

填写表格
上传512px图标

由于我知道如何创建PWA，因此我想起了以下几点：

正常的PWA将允许浏览器处理交互，众所周知，这种交互很少引起注意
需要一个“安装我”按钮，但需要对您的跨浏览器javascript充满信心
欢迎您安装安装计数器

Progressier.com为此提供了解决方案。生成用于PWA，PWA安装按钮和PWA安装计数器的代码轴。

限制：免费服务仅限于5万个综合浏览量。

来源

I built a tool that makes building a PWA much easier

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

7 个答案:

来源