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

Question

我了解到,通过正确制作的Progressive Web App,移动浏览器将显示一个横幅,提示用户在其主屏幕上"安装"该应用.

我一直在寻找一种方法来从应用程序中触发该提示,但一直无法找到任何东西.

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

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

Answer 1

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

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

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

备用选项:如果用户错过了安装提示,或者甚至选择不将其安装到主屏幕,请花点时间,当您认为他开始喜欢您的网站时(基于转换),您可以向他显示整页或半页面Div弹出一种安装说明,用于从浏览器菜单将您的站点添加到主屏幕.它可以有一些图像或Gif动画,向用户显示如何从菜单添加到主屏幕.有了它,对大多数用户来说应该是自我解释的,如果不是全部的话.

下面是一些相同的代码示例,它是iOS特定的(在#PROTIP 3下查看).

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

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

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

Answer 2

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

Pete LePage在 web.dev 上写了一篇非常清晰的文章，名为如何提供您自己的应用内安装体验，详细介绍了该过程。代码片段和过程直接取自文章。

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

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

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

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

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

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

Answer 3

好吧，没有什么可以阻止您将 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 状态）完成的