AMP
繁中
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

amp-app-banner

說明

跨平台、固定位置橫幅的封裝器和最小化 UI，顯示安裝應用程式的呼籲行動。

 

必要指令碼

<script async custom-element="amp-app-banner" src="https://cdn.ampproject.org/v0/amp-app-banner-1.0.js"></script>

支援的版面配置

用法

跨平台、固定位置橫幅的封裝器和最小化 UI，顯示安裝應用程式的呼籲行動。

`amp-app-banner` 元件包含條件邏輯，可將使用者導向正確平台上的正確應用程式。如果使用者關閉橫幅，橫幅將永久隱藏。

<head>
  <meta
    name="apple-itunes-app"
    content="app-id=123456789, app-argument=app-name://link/to/app-content"
  />
  <link rel="manifest" href="https://link/to/manifest.json" />
</head>

. . .

<body>
  <amp-app-banner layout="nodisplay" id="demo-app-banner-2134">
    <amp-img src="https://example.com/icon.png" width="60" height="51">
    </amp-img>
    <h3>App Name</h3>
    <p>Experience a richer experience on our mobile app!</p>
    <div class="actions">
      <button open-button>Get the app</button>
    </div>
  </amp-app-banner>
</body>

如需全頁範例，請參閱 article.amp.html。

使用 `amp-app-banner` 必須符合以下要求

  • 請勿將 amp-ad/amp-embed、amp-sticky-ad 或 amp-iframe 作為後代元素包含在內。

  • height 不得超過 100px。

  • 必須是 <body> 標籤的直接子元素。

  • Android manifest 的 href 屬性必須透過 https 提供。

  • 單一頁面上請勿包含多個 amp-app-banner。

指定資料來源

為了擴展和推廣 iOS 和 Android 上原生支援的應用程式橫幅的使用，amp-app-banner 使用與原生應用程式橫幅在其各自平台上使用的完全相同的資料來源。iOS 在文件標頭中使用 <meta name="apple-itunes-app"> 標籤，而 Android 使用 <link rel="manifest"> 標籤。

  • 在 iOS 上，AMP 執行階段會解析 <meta> 標籤的 content 屬性，以提取 App ID 和 app-argument。這些通常用於深層連結 URI，例如應用程式協定，如 whatsapp:// 或 medium://。

    • <meta> 標籤必須具有 name 和 content 屬性。

    • content 屬性的值必須包含 app-id=。

  • 在 Android 上，AMP 執行階段會發出 XHR 請求以取得 manifest.json 檔案。執行階段會解析內容，從 related_applications 中提取 app_id，並計算應用程式商店 URL 以及應用程式內開啟 URL，其形式如下：android-app://${appId}/${protocol}/${host}${pathname}

    • <link> 標籤必須具有 "rel='manifest'" 屬性和值，以及 href 屬性。

協定、主機和路徑名稱是從 AMP 文件的標準 URL 計算得出的。您的原生應用程式需要在其 manifest 中註冊連結。如需更多資訊，請查閱行動深層連結。

應用程式 manifest 範例 

<activity
    android:name="com.example.android.GizmosActivity"
    android:label="@string/title_gizmos" >
    <intent-filter android:label="@string/view_article">
        <!-- This is important in order to allow browsers to launch your app. -->
        <category android:name="android.intent.category.BROWSABLE" />
        <!-- Accepts URIs that begin with "https://CANONICAL_HOST/gizmos" -->
        <data android:scheme="https"
              android:host="CANONICAL_HOST"
              android:pathPrefix="/" />
    </intent-filter>
</activity>

manifest.json 範例

{
  "prefer_related_applications": true, // This is not necessary for <amp-app-banner>, but signals a preference on non-AMP pages using the same manifest.json file for the native app over a web app if available
  "related_applications": [
    {
      "platform": "play",
      "id": "com.app.path",
      "url": "android-app://com.app.path/https/host.com/path/to/app-content"
    }
  ]
}

UI 行為

`amp-app-banner` 不提供預設 UI。相反地，開發人員可以在橫幅內建構任何種類的 UI，並相應地設定其樣式。

目前，橫幅會持續顯示，直到被關閉。關閉後，除非使用者使用不同的瀏覽器造訪或清除其本機儲存空間，否則橫幅永遠不會在該網域上顯示。

UI 中必要的屬性

橫幅中需要 button[open-button] 按鈕。這是點擊目標，用於安裝應用程式，或在已安裝的情況下，開啟深層連結。

button[open-button] 元素不能具有 disabled 值。

關閉按鈕限制

用於關閉橫幅的「X」按鈕在自訂方面有限制。您可以使用 .amp-app-banner-dismiss-button 類別設定此按鈕的樣式。保持關閉按鈕在行動裝置上可見且易於存取，以使橫幅不會阻擋內容。

作業系統、瀏覽器和檢視器依賴性

原生應用程式橫幅不會在檢視器內容中顯示。因此，當存在適當的標記時，amp-app-banner 會在檢視器內部顯示。

但是，當在相容作業系統（例如 Android 和 Chrome 或 iOS 和 Safari）上的瀏覽器中檢視時，會顯示系統級應用程式橫幅。在這些情況下，amp-app-banner 會被隱藏以避免冗餘。下表顯示了這些依賴性

情境 Android + Chrome iOS + Safari 其他作業系統 + 瀏覽器
在 AMP 檢視器中 顯示 amp-app-banner 顯示 amp-app-banner 顯示 amp-app-banner
在 AMP 檢視器外 顯示系統橫幅 顯示系統橫幅 顯示 amp-app-banner

屬性

id

定義 amp-app-banner 元件的唯一識別碼。id 值用於持久性邏輯。

layout

指定橫幅的版面配置。值必須為 nodisplay。

驗證

請參閱 AMP 驗證器規格中的 amp-app-banner 規則。

需要更多協助嗎？

您已閱讀本文檔十幾次，但它仍然沒有涵蓋您的所有問題？可能其他人也有同感：在 Stack Overflow 上與他們聯繫。

前往 Stack Overflow
發現錯誤或缺少功能？

AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開源社群的持續參與者，但我們也歡迎針對您特別熱衷的問題的一次性貢獻。

前往 GitHub