• 网站

amp-app-banner

简介

amp-app-banner 提供了一个简洁的跨平台固定位置横幅 UI，其中显示了安装应用程序的号召性用语。特别是，amp-app-banner 在 AMP 查看器（例如 Google 搜索中的热门新闻轮播）中工作。在 AMP 查看器之外，原生应用程序横幅将在 iOS 上的 Safari 和 Android 上的 Chrome 中显示，而不是 amp-app-banner。

设置

导入 amp-app-banner 组件。

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

在 元数据 中声明 iOS 应用程序。这也启用了 Safari 的内置应用程序安装横幅。

<meta name="apple-itunes-app" content="app-id=828256236, app-argument=medium://p/9ea61abf530f">

Android 应用程序需要在 Web 应用程序清单中声明。这也将启用 Android 版 Chrome 中的 原生应用程序安装横幅。

<link rel="manifest" href="/amp-app-banner-manifest.json">

应用程序的深层链接是根据您的 AMP 的规范链接计算的。在这里，我们链接到 Medium 上的一篇文章，因为我们没有原生 AMP by Example 应用程序。

<link rel="canonical" href="https://amp.org.cn/documentation/examples/components/amp-app-banner/index.html">

基本用法

只要高度不超过 100px，开发者就可以完全自定义 amp-app-banner。一个必需的 UI 元素是一个带有属性 [open-button] 的按钮，它会触发应用程序安装，或者如果应用程序已安装，则打开深层链接。

<amp-app-banner layout="nodisplay" id="my-app-banner">
  <amp-img src="https://cdn-images-1.medium.com/max/50/1*JLegdtjFMNgqHgnxdd04fg.png" width="50" height="43" layout="fixed"></amp-img>
  <div class="banner-text">Learn more in the app.</div>
  <button open-button>View in app</button>
</amp-app-banner>

演示

自定义应用程序横幅会显示在 AMP 查看器中。横幅操作会在应用程序内打开文档的规范 URL 作为深层链接

<amp-video width="1920" height="1080"
  src="/video/amp-app-banner-android-app-installed.mp4"
           layout="responsive"
           controls>
</amp-video>

...如果未安装该应用程序，则横幅操作会在 Play 商店/App Store 中显示该应用程序

<amp-video width="1920" height="1080"
  src="/video/amp-app-banner-android-app-not-installed.mp4"
           layout="responsive"
           controls>
</amp-video>

测试

amp-app-banner 只会在不提供自己的应用程序安装横幅的浏览器中显示。这意味着 Android 上的 Chrome 或 iOS 上的 Safari 不会显示 amp-app-banner，而是显示原生安装横幅。要测试 amp-app-banner，您可以打开此页面

• 在移动设备上：在没有原生安装横幅的浏览器中，例如 Android 上的 Firefox 或 iOS 上的 Chrome。
• 在桌面上：在 移动设备模拟模式 中，将 #webview=1 追加到 页面 URL。另一种选择是在移动仿真模式中使用自定义用户代理，例如：Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) CriOS/51.000.21 Mobile/13B143 Safari/601.1

• 作者： @juliantoledo