En Chrome 76, puede ocultar la minibarra informativa de Agregar a la pantalla principal

Penny McLachlan
Penny McLachlan

Información general sobre las apps web progresivas y la mini barra de información

Las apps web progresivas (AWP) son un patrón para crear sitios web confiables, instalables y con carga instantánea, similares a las apps.

Cuando tu APW apruebe la lista de verificación de instalabilidad en Android, aparecerá un diálogo del sistema de Chrome llamado mini barra de información en la parte inferior de la ventana del navegador.

Actualmente, la mini barra informativa Agregar a la pantalla principal se muestra al mismo tiempo que el evento de beforeinstallprompt.

Cambios en Chrome 76

Escuchamos a nuestra comunidad y nos dimos cuenta de que los desarrolladores quieren tener más control sobre cuándo solicitar a los usuarios que instalen una AWP. Sus opiniones nos importan.

A partir de Chrome 76, puedes evitar que aparezca la barra de información pequeña llamando a preventDefault() en el evento beforeinstallprompt.

El evento beforeinstallprompt puede ayudarte a promocionar la instalación de tu app web progresiva, lo que facilita que los usuarios la agreguen a su pantalla principal. Nuestra comunidad compartió que los usuarios que instalan una AWP en la pantalla principal tienen un alto nivel de participación, con más visitas repetidas, más tiempo dedicado a la app y, cuando corresponde, mayores tasas de conversión.

Ejemplo de Pinterest que usa un banner de instalación para promocionar la capacidad de instalación de su AWP.
Ejemplo de Pinterest que usa un banner de instalación para promocionar la capacidad de instalación de su AWP. Consulta Agregar a la pantalla principal para obtener detalles completos sobre el flujo de agregar a la pantalla principal, incluidos ejemplos de código y otras prácticas recomendadas.

Para promocionar tu app web sin la mini barra de información, escucha el evento beforeinstallprompt y, luego, guárdalo. A continuación, actualiza tu interfaz de usuario para indicar que se puede instalar tu PWA. Por ejemplo, agrega un botón de instalación, muestra un banner de instalación, usa promociones en el feed o una opción de menú. Cuando el usuario hace clic en el elemento de instalación, llama a prompt() en el evento beforeinstallprompt guardado para mostrar el diálogo modal de agregar a la pantalla principal.

El futuro de la mini barra informativa de Agregar a la pantalla principal

El uso de la barra de información para agregar a la pantalla principal sigue siendo una medida temporal. Estamos experimentando con nuevos patrones de IU que seguirán brindando a los usuarios de apps web progresivas la capacidad de instalar, y lo haremos de una manera que reduzca el desorden en la experiencia de navegación.