是否可以制作触发PWA“添加到主屏幕”的应用内按钮。安装横幅？ [英] Is it possible to make an in-app button that triggers the PWA "Add to Home Screen" install banner?

问题描述

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

I understand that with a properly made Progressive Web App mobile browsers will display a banner prompting users to 'Install' the app on their home screen.

我去过四处寻找从应用程序中触发该提示的方法，但一直无法找到任何内容。

I have been looking around for a way to trigger that prompt from within the app, but have not been able to find anything.

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

Is there a line of JavaScript that can be used to call the install prompt banner at any time?? Something that I could add to a install button tucked away in a help screen for instance?

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

It might be difficult for some users to find the "Add to Home Screen" option if they missed the install banner prompt. I'd like to give them a button they can click to be prompted again.

推荐答案

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

Chrome(or any PWA supporting browser) triggers the beforeinstallprompt event for Web app install banner, which you can catch and re-trigger in more appropriate time when you think user wont miss it/convinced about adding your site to home page. Starting Chrome version 68, catching beforeinstallprompt and handling the install prompt programmatically is mandatory and no banners will be shown automatically.

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

In case the user have missed the prompt/declined to add to home screen, the event can't be manually triggered by our code. This is intentionally left that way to avoid web pages annoying the users to repeatedly prompt the user for adding to home screen. Thinking of users perspective, this makes complete sense.

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

Yes, there are cases when user miss the option accidentally and he may not know of the browser menu option to "Add to home screen" and it would be nice for us to trigger the same again. But unfortunately, that's not an option. At lest for now and I personally don't see that changing much considering how developers can abuse if its left to the developers to prompt.

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

Alternate option: If the user have missed the install prompt or even chosen not to install it to home screen, give some time and when you think he is starting to like your site(based on conversions) you can show him a full page or half page Div popup kind of install instructions to add your site to home screen from browsers menu. It can have some images or Gif animation showing user how to add to home screen from the menu. With that, it should be self explanatory to most users, if not all.

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

Here is some code example for the same, which is iOS specific(look under #PROTIP 3).

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

As a bonus, you can show some promotions like discounts or added features when user add to home screen, which will convince user to do so. PWA has a way to find if the site is accessed form the home screen or browser.

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

For Development/testing: If you need this banner to come multiple times for dev/testing purpose, you can set the below flow in your Chrome for the same,

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

这篇关于是否可以制作触发PWA“添加到主屏幕”的应用内按钮。安装横幅？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！