用法
- 指定数据源
  - 示例应用程序清单
  - 示例 manifest.json
- UI 行为
属性
- id
- layout
验证

重要提示：此文档不适用于您当前选择的格式 ads！

amp-app-banner

描述

一个跨平台、固定位置的横幅的包装器和最小化 UI，显示用于安装应用程序的号召性用语。

必需的脚本

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

支持的布局

nodisplay

用法

一个跨平台、固定位置的横幅的包装器和最小化 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 清单 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 以及 open-in-app URL，其格式如下：android-app://${appId}/${protocol}/${host}${pathname}
- <link> 标记必须具有 "rel='manifest'" 属性和值，以及 href 属性。

协议、主机和路径名是从 AMP 文档的规范 URL 计算得出的。您的原生应用程序需要在其清单中注册这些链接。有关详细信息，请阅读移动深层链接。

示例应用程序清单

<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

amp-app-banner 1.0 0.1

描述