• 网站

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。 一个必需的用户界面元素是带有属性 [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