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

Question

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

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

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

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

Answer 1

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

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

Answer 2

适用于 iOS 的智能应用横幅

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

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

适用于 Android 的智能应用横幅

Android 上没有对 Smart App Banners 的原生支持，但您可以使用 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 -->