AMP Conf 2020: Save the date!
AMP
  • websites

amp-app-banner

Introduction

amp-app-banner provides a minimal UI for a cross-platform, fixed-position banner showing a call-to-action to install an app. In particular, amp-app-banner works inside an AMP viewer such as the Top Stories carousel in Google Search. Outside of the AMP viewer, the native app banners will be displayed instead of amp-app-banner in Safari on iOS and in Chrome on Android.

Setup

Import the amp-app-banner component.

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

Declare the iOS app in the meta data. This enables Safari's build-in app install banner as well.

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

Android apps need to be declared in the web app manifest. This will also enable the native app install banner in Chrome on Android.

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

Deep links into your apps are calculated based on your AMP's canonical link. Here we link to an article on Medium as we don't have a native AMP by Example app.

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

Basic usage

The amp-app-banner can be fully customized by the developer as long as the height doesn't exceed 100px. One required UI element is a button with the attribute [open-button], which triggers the app install, or opens the deep-link if the app is already installed.

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

Demo

The custom app banner shows up in AMP Viewers. The banner action opens the document's canonical URL as deep-link inside the app:

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

...and if the app is not installed, the banner action shows the app in the Play Store / App Store:

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

Testing

The amp-app-banner will only show in browsers that don't provide their own app install banner. This means Chrome on Android or Safari on iOS will not show the amp-app-banner, but the native install banner. For testing amp-app-banner you can open this page:

  • On a mobile device: in browser without native install banner, e.g. Firefox on Android or Chrome on iOS.
  • On Desktop: in mobile device emulation mode append #webview=1 to the page URL. The other option is to use a custom user agent in mobile emulation mode, for example: 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
需要进一步说明?

如果此页面的说明未能涵盖您的所有问题,欢迎与其他 AMP 用户取得联系,讨论您的具体用例。

前往 Stack Overflow
一项无法解释的功能?

AMP 项目强烈鼓励您参与其中并作出贡献!我们希望您能成为我们开源社区的持续参与者,但我们也欢迎您对热衷问题做出单次贡献。

在 GitHub 上编辑实例