我们究竟应该如何在 Android 上为 Chrome 实现原生应用安装提示？

Question

我正在https://developers.google.com/web/fundamentals/app-install-banners/native查看 Google 文档，试图弄清楚如何在 Chrome for Android 上显示安装横幅以安装我们的本机应用程序.

首先，在几个地方，这个页面是指将你的应用程序添加到主屏幕，这不是这个页面应该是关于的，对吧？这应该是关于安装本机应用程序，而不是 PWA。

但我真正的问题是：现实世界中的流程应该是什么样的？如果满足所有适当的条件，我们应该显示一个按钮或其他用户可以与之交互的东西，然后 Chrome 显示安装横幅？那么，我们显示一个按钮或横幅，上面写着“安装我们的应用程序”，然后如果用户点击它，Chrome 会显示另一个横幅，上面写着“安装”？这似乎是一种非常多余的体验，需要更多的按钮点击才能安装，而不仅仅是自动显示 Chrome 安装横幅（这就是我收集它过去工作的方式）。

我进行了大量搜索，但找不到任何人们展示他们如何使用当前流程的示例。真的有人在用这个吗？

我应该使用https://github.com/ain/smartbanner.js 之类的东西吗？

Answer 1

这些文档令人困惑、具有误导性，并且经常提到 PWA。一旦您拥有清单并满足要求，就会出现一个带有install链接或add to home screen链接的本机横幅。以下是我对 Android 智能应用横幅的更新要求以及如何对其进行测试。我在文档中包含了一个缺失的标准：需要多种不同的图标大小。

Android 原生应用安装提示要求

• 已安装 Web 应用程序和本机应用程序。
• 满足用户参与启发式（当前，用户与域交互至少 30 秒）
• 包括一个 Web 应用程序清单，其中包括：
  • 简称
  • 名称（在横幅提示中使用）
  • 图标包括36x36, 48x48, 72x72, 96x96, 144x144, 192x192,512x512版本
  • prefer_related_applications 为真
  • related_applications 对象包含有关应用程序的信息
• start_url 可以设置.为当前位置
• 清单通过 HTTPS 提供 - manifest.json
  • 将此包含在您的页面上 <link rel="manifest" href="manifest.json" />

测试

• 在您的 Android 设备或模拟器上登录 chrome
• 登录 Google Play 商店（设备上必须有 Play 商店）
• 在 chrome 中启用此标志 chrome://flags/#bypass-app-banner-engagement-checks
• 该应用程序不应已安装在设备上

调试

检查浏览器中的源选项卡以查看清单是否正确提供，并记得检查控制台是否有任何错误（警告很好）

例子

manifest.json

{
  "name": "App Name",
  "short_name": "App Name Install Banner Sample",
  "icons": [
    {
      "src": "icon-0-75x.png",
      "sizes": "36x36",
      "type": "image/png"
    },
    {
      "src": "icon-1x.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "icon-1-5x.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "icon-2x.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "icon-3x.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "icon-4x.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "prefer_related_applications": true,
  "related_applications": [
    {
      "platform": "play",
      "id": "com.google.samples.apps.iosched",
      "url": "https://play.google.com/store/apps/details?id=com.google.samples.apps.iosched"
    }
  ],
  "start_url": ".",
  "display": "standalone"
}