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

Posted 2023-02-16

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

【英文标题】：Is it possible to make an in-app button that triggers the PWA "Add to Home Screen" install banner?

【发布时间】：2018-10-24 05:16:55

【问题描述】：

我了解，使用正确制作的 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。

【问题讨论】：

您使用什么类型的设备进行测试？

这里有一些您可能想要查看的有用文档：developers.google.com/web/fundamentals/app-install-banners

@MathiasRechtzigel 谢谢，这非常有用。正如本文档和下面 Anand 的回答所解释的那样，不幸的是，似乎无法做到我想象的那样，即创建一个链接以随时提示安装。提示只会出现一次，无论是自然的还是抓住然后通过按钮按下等释放。

iphone 上只有 safari 的任何解决方案？

正如this great article from web.dev 解释的那样，现在这是完全可能的。

【参考方案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

【讨论】：

请问我如何知道用户是否已经在移动设备上安装了 PWA？

@PardeepJain 如果您将start_url 设置为/?utm_source=pwa，您应该能够以编程方式检查用户是否将应用程序作为 PWA普通浏览器。）

浏览器应该为用户提供永久禁用提示的选项。因此，如果某个应用滥用了提示，用户可以禁用它，如果用户错过了提示，该应用仍然可以再次触发它。我认为这是一个很好的平衡。

一种检查用户是否在使用独立应用程序的方法：if (window.matchMedia('(display-mode: standalone)').matches) … 。 See docs

使用 Lighthouse 检查时似乎一切正常，但在cambio.express 的 android/Chrome 上未触发提示 - 猜猜为什么？谢谢！

【参考方案2】：

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

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

【讨论】：

这就像问题的反面..这是手动方式..问题是关于通过代码触发它..

它没有改变..只是指出您回答了其他问题

当检测到 iOS 并且浏览器还不是 PWA 时，我正在寻找的是 CSS 构建的叠加层

【参考方案3】：

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

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

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

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

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

【参考方案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 状态）完成的

【讨论】：

您好，能否分享您的 redux 代码给我，我面临的场景与您在 react 和 redux 中实现的情况相同。

【参考方案5】：

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

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

收听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 中实现安装按钮。

【讨论】：

嗨，请在纯 js + css + htm 中分享一个不可知的 pwa 安装按钮示例。我仍然为这个答案 +1 ;)

【参考方案6】：

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

填写表格 上传 512px 图标

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

普通 PWA 将让浏览器处理交互

，众所周知，这几乎不引人注意 因此需要一个

“安装我”按钮

，但需要对您的跨浏览器 javascript 有信心 欢迎使用

安装计数器

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

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

来源

I built a tool that makes building a PWA much easier

【参考方案7】：

在开发模式下，

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

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

【讨论】：

这很适合触发事件，但实际上并没有创建提示，或者允许从事件进行安装