我如何在移动浏览器中提示本机应用程序安装

Question

您好，我想在移动浏览器中显示横幅以提示用户从商店（Google Play 或 Apple）下载应用程序。 一个例子是下面的例子横幅

对于 IOS，我找到了这个。 它似乎只适用于 safari 浏览器。 有没有办法为其他浏览器实现它？

对于 Android，我找到了这个。 它适用于 PWA。 我试图在我们的网站（不是 PWA）中实现它，但没有显示任何内容。

有什么方法可以同时在操作系统和所有最新的浏览器中工作吗？ 如果没有，我如何获得评级，最新图标并检查它是否在该国家/地区受支持？

Answer 1

另一种选择是smartbanner.js ，~13 KB，没有 jQuery 或其他依赖项。

基于十几个元标记易于设置，但也有 API 用于更复杂的场景。

Answer 2

iOS 的智能应用横幅

为了在访问者使用 iOS 设备（iPhone、iPod 或 iPad）打开 web 时显示横幅，您只需在 HTML 代码的 head 元素中包含以下行：

<meta name="apple-itunes-app" content="app-id=myAppStoreID">

Android 的智能应用横幅

Android 不支持智能应用横幅，但您可以使用 jQuery 插件代替。

首先，下载插件并上传到您的服务器 jquery.smartbanner.css 和 jquery.smartbanner.js。

然后，您需要包含两个代码片段。 head 元素中的第一个：

<meta name="google-play-app" content="app-id=com.package.android">
<link rel="stylesheet" href="/path/a/jquery.smartbanner.css" type="text/css" 
media="screen">

第二段代码必须包含在主体的末尾。

<!-- copy body -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js">. 
</script>
<script src="/path/a/jquery.smartbanner.js"></script>
<script type="text/javascript">
  $().smartbanner();
</script>
<!-- end copy body -->