¿Cómo agregar amp-app-banner? Instrucciones
amp-app-banner
El componente amp-app-banner proporciona una interfaz de usuario mínima para un banner de posición fija cross-platform que muestra una llamada a la acción para instalar una aplicación. En particular, amp-app-banner funciona dentro de un visor de AMP, como el carrusel de Top Stories en la Búsqueda de Google. Fuera del visor de AMP, se mostrarán los banners de aplicaciones nativas en lugar de amp-app-banner en Safari en iOS y en Chrome en Android.
Agregar
Importe el componente amp-app-banner justo abajo de la apertura <head>
Declare la aplicación iOS en los metadatos. Esto permite que Safari construya también el banner de instalación de la aplicación.
Las aplicaciones de Android deben declararse en el manifiesto de la aplicación web. Esto también habilitará el banner de instalación de aplicación nativa en Chrome en Android.
Los enlaces profundos en tus aplicaciones se calculan en función del enlace canónico de tu AMP. Aquí enlazamos a un artículo sobre Medium ya que no tenemos una aplicación nativa de AMP by Example.
Uso básico
El amplificador amp-app-banner puede ser completamente personalizado por el desarrollador, siempre y cuando la altura no supere los 100px. Un elemento de interfaz de usuario requerido de un botón con el atributo [open-button], que activa la instalación de la aplicación o abre el deep-link si la aplicación ya está instalada.
Demo
El banner de aplicación personalizada aparece en los visores de AMP. La acción de banner abre la URL canónica del documento como enlace profundo dentro de la aplicación:
... y si la aplicación no está instalada, la acción de banner muestra la aplicación en Play Store / App Store:
Pruebas
El amplificador amp-app-banner solo se mostrará en los navegadores que no proporcionen su propio banner de instalación de aplicaciones. Esto significa que Chrome en Android o Safari en iOS no mostrará el amplificador amp-app-banner, sino el banner de instalación nativo. Para probar amp-app-banner puede abrir esta página:
- En un dispositivo móvil: en el navegador sin banner de instalación nativo, por ejemplo, Firefox en Android o Chrome en iOS.
- En el escritorio: en el modo de emulación del dispositivo móvil append #webview=1 a la URL de la página. La otra opción es utilizar un agente de usuario personalizado en el modo de emulación móvil, por ejemplo:
Agregar
Importe el componente amp-app-banner justo abajo de la apertura <head>
<script async custom-element="amp-app-banner" src="https://cdn.ampproject.org/v0/amp-app-banner-0.1.js"></script>
Declare la aplicación iOS en los metadatos. Esto permite que Safari construya también el banner de instalación de la aplicación.
<meta name="apple-itunes-app" content="app-id=828256236, app-argument=medium://p/9ea61abf530f">
Las aplicaciones de Android deben declararse en el manifiesto de la aplicación web. Esto también habilitará el banner de instalación de aplicación nativa en Chrome en Android.
<link rel="manifest" href="/amp-app-banner-manifest.json">
Los enlaces profundos en tus aplicaciones se calculan en función del enlace canónico de tu AMP. Aquí enlazamos a un artículo sobre Medium ya que no tenemos una aplicación nativa de AMP by Example.
<link rel="canonical" href="https://medium.com/google-developers/how-to-avoid-common-mistakes-when-publishing-accelerated-mobile-pages-9ea61abf530f">
Uso básico
El amplificador amp-app-banner puede ser completamente personalizado por el desarrollador, siempre y cuando la altura no supere los 100px. Un elemento de interfaz de usuario requerido de un botón con el atributo [open-button], que activa la instalación de la aplicación o abre el deep-link si la aplicación ya está instalada.
Ejemplo <amp-app-banner layout="nodisplay" id="banner"> <div id="banner-logo"> <amp-img src="https://cdn-images-1.medium.com/max/50/1*JLegdtjFMNgqHgnxdd04fg.png" width="50" height="43" layout="fixed"></amp-img> </div> <div id="banner-text">Learn more about AMP in the Medium App.</div> <div id="banner-action"> <button class="ampstart-btn mr1 caps" open-button>View in app</button> </div> </amp-app-banner>
Demo
El banner de aplicación personalizada aparece en los visores de AMP. La acción de banner abre la URL canónica del documento como enlace profundo dentro de la aplicación:
... y si la aplicación no está instalada, la acción de banner muestra la aplicación en Play Store / App Store:
Pruebas
El amplificador amp-app-banner solo se mostrará en los navegadores que no proporcionen su propio banner de instalación de aplicaciones. Esto significa que Chrome en Android o Safari en iOS no mostrará el amplificador amp-app-banner, sino el banner de instalación nativo. Para probar amp-app-banner puede abrir esta página:
- En un dispositivo móvil: en el navegador sin banner de instalación nativo, por ejemplo, Firefox en Android o Chrome en iOS.
- En el escritorio: en el modo de emulación del dispositivo móvil append #webview=1 a la URL de la página. La otra opción es utilizar un agente de usuario personalizado en el modo de emulación móvil, por ejemplo:
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
Comentarios
Disqus comments:
Facebook comments: