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

【问题标题】：How can i prompt native app installation in mobile browsers如何在移动浏览器中提示安装本机应用程序
【发布时间】：2020-06-10 08:02:08
【问题描述】：

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

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

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

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

【问题讨论】：

标签： android ios smartbanner

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

适用于 iOS 的智能应用横幅

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

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

适用于 Android 的智能应用横幅

Android 上没有对 Smart App Banners 的原生支持，但您可以使用 jQuery 插件。

首先，download the plugin 并上传到您的服务器 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 -->

【讨论】：