Instalación de la barra de direcciones para apps web progresivas en el escritorio

Las apps web progresivas son fáciles de instalar con un nuevo botón de instalación en la barra de direcciones de Chrome (cuadro multifunción).

En computadoras de escritorio, por lo general, no se le indica al usuario que se puede instalar una app web progresiva y, si es así, el flujo de instalación se oculta en el menú de tres puntos.

En Chrome 76 (beta a mediados de junio de 2019), facilitamos a los usuarios la instalación de apps web progresivas en computadoras de escritorio agregando un botón de instalación a la barra de direcciones (cuadro multifunción). Si un sitio cumple con los criterios de instalabilidad de la app web progresiva, Chrome mostrará automáticamente un ícono de instalación en la barra de direcciones. Si hace clic en el botón, se le pedirá al usuario que instale la AWP.

Al igual que con otros eventos de instalación, puedes detectar el evento appinstalled para detectar si el usuario instaló tu PWA.

Cómo agregar tu propio mensaje de instalación

Si tu AWP tiene casos de uso en los que es útil que un usuario instale tu app, por ejemplo, si tienes usuarios que usan tu app más de una vez a la semana, debes promocionar la instalación de tu AWP dentro de la IU web de tu app.

Para agregar tu propio botón de instalación personalizado, escucha el evento beforeinstallprompt. Cuando se active, guarda una referencia al evento y actualiza la interfaz de usuario para informarle al usuario que puede instalar tu app web progresiva.

Patrones para promover la instalación de tu AWP

Existen tres formas clave de promocionar la instalación de tu AWP:

  • Promoción automática del navegador, como el botón de instalación de la barra de direcciones
  • Promoción de la IU de la aplicación, en la que los elementos de la IU aparecen en la interfaz de la aplicación, como banners, botones en el encabezado o el menú de navegación, etcétera.
  • Los patrones promocionales intercalados entrelazan las promociones dentro del contenido del sitio.

Consulta los patrones para Promover la instalación de la AWP (dispositivos móviles) para obtener más detalles. Su enfoque está en los dispositivos móviles, pero muchos de los patrones se pueden aplicar a las computadoras de escritorio o modificarse fácilmente para que funcionen en esas experiencias.