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

docs 会引起混淆、误导，并且经常指代 PWA。一旦您拥有清单并满足要求，就会出现一个带有 install 链接或 add to home screen 链接的原生横幅。以下是我对 Android 智能应用横幅的更新要求以及如何对其进行测试。我在文档中包含了一个缺失的标准：需要多种不同的图标大小。

Android 原生应用安装提示要求

网络应用和本机应用均已安装。
符合用户参与启发式（目前，用户与域交互至少 30 秒）
包括一个网络应用清单，其中包括：
- short_name
- 名称（在横幅提示中使用）
- 图标包括 36x36、48x48、72x72、96x96、144x144、192x192、512x512 版本
- prefer_related_applications 为真
- related_applications 对象，其中包含有关应用的信息
可以将当前位置的 start_url 设置为 .
Manifest 通过 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"
}

Answer 2

流程基本上是由manifest.json中的prefer_related_applications定义的...这与PWA不同，在PWA中，仅将链接添加到主屏幕，但未引用Play商店。安装后，Android SDK应用程序可以过滤相关内容的URL。

我们到底应该如何在Android上实现Chrome的本机应用安装提示？

2 个答案:

Android 原生应用安装提示要求

测试

调试

示例