• 网站

amp-app-banner

简介

amp-app-banner 提供了一个最小的用户界面，用于显示一个跨平台的、固定位置的横幅，该横幅显示一个安装应用程序的号召性用语。 特别是，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">

需要在 Web 应用清单 中声明 Android 应用。 这也将启用 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">

基本用法

只要高度不超过 100 像素，开发者就可以完全自定义 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