• 网站

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">

基本用法

只要高度不超过 100px，开发者就可以完全自定义 amp-app-banner。一个必需的用户界面元素是具有属性 [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 编写