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

重要事項：此文件不適用於您目前選取的格式 stories！

amp-app-banner

說明

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

 

必要指令碼

<script async custom-element="amp-app-banner" src="https://cdn.ampproject.org/v0/amp-app-banner-0.1.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 的使用必須符合以下要求

指定資料來源

為了擴展和推廣 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}

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

應用程式資訊清單範例 

<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