我如何在移動瀏覽器中提示本機應用程序安裝

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 -->