Android 本机应用程序安装横幅在 2024 年不起作用

Question

我们有一个 React 网站，其中有关联的 iOS 和 Android 应用程序。我为 iOS 设置了一个智能应用横幅，这很容易，但我在显示 Android 应用横幅时遇到了问题。

TL;DR 我需要知道横幅是否由 Google Chrome 提供，或者我是否必须提供一个并侦听 beforeinstallprompt 事件并有一个自定义横幅/按钮来触发提示（）回调？

根据我如何知道 iOS 应用横幅的工作原理，并关注大量其他堆栈溢出帖子，并遵循本指南（据说是从 2023 年开始），似乎横幅是由 Chrome 提供的，并且没有任何内容除了：

之外我还需要做更多

• 提供公共文件夹中的具体清单
• 提供图标（也在公共文件夹中）
• 将

  <link .../>

  添加到index.html
• 从 https 提供以上所有内容

我已经检查了桌面 Chrome 开发工具中的清单，只收到一些关于

Richer PWA install ui

的全尺寸屏幕截图的警告，我认为这是可以预料的。 PWA 可以通过三点菜单在 Android 上正常安装。

问题的一部分在于，谷歌似乎已经删除了每个人都提到的可以打开以跳过参与度检查的

#bypass-app-banner-engagement-checks

。因此，我必须进行更改，然后连续 2 天访问该网站以尝试触发横幅，但没有成功，然后进行更改并重试。

这是经过清理的清单：

{
  "short_name": "App Name",
  "name": "App Name",
  "icons": [
    {
      "src": "36x36_banner-icon.png",
      "sizes": "36x36",
      "type": "image/png"
    },
    {
      "src": "48x48_banner-icon.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "72x72_banner-icon.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "96x96_banner-icon.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "144x144_banner-icon.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "192x192_banner-icon.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "512x512_banner-icon.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "prefer_related_applications": true,
  "related_applications": [
    {
      "platform": "play",
      "id": "the.google.play.store.id",
      "url": "https://play.google.com/store/apps/details?id=the.google.play.store.id"
    }
  ],
  "start_url": ".",
  "display": "standalone"
}

尝试了所有较旧的堆栈溢出帖子的建议（最新的帖子已经一年多了）。根本没看到横幅展示。

Answer 1

您的清单看起来有一个小问题。根据我个人的经验，

start_url

属性需要是一个完整的URL，例如“https://{domain}”，而不仅仅是“.”。

无论如何，如果没有用户手势（例如单击按钮），则不会显示提示。所以你需要

1. 在页面上创建一个按钮并使用

   display:none

   设置其样式。
2. 添加

   "beforeinstallprompt"

   窗口事件处理程序。处理程序应将您的按钮设置为可见，并将事件保存到父（或全局）作用域中的

   deferredEvent

   变量。
3. 添加

   "click"

   按钮事件处理程序。处理程序应调用

   deferredEvent.prompt()

   和

   deferredEvent.userChoice.then()

   。

最后，根据我自己的经验，您根本不需要

start_url

或

display

属性，除非您在本地桌面 Chrome 浏览器上进行测试。如果您在 Play 商店中有真正的 Android 应用程序，Android Chrome 不会关心这些。

您可以在https://developer.chrome.com/blog/app-install-banners-native/

找到官方文档