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

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

Por lo general, en las computadoras de escritorio no hay una indicación para el usuario de que una Progressive Web La app se puede instalar y, de ser así, el flujo de instalación se oculta en las tres menú de puntos.

En Chrome 76 (beta a mediados de junio de 2019), los usuarios podrán instalar Agrega un botón de instalación a la dirección para las apps web progresivas en el escritorio. (cuadro multifunción). Si un sitio cumple con los Criterios para la instalación de apps web progresivas, Chrome mostrará automáticamente un ícono de instalación en la barra de direcciones. Al hacer clic en el le solicita al usuario que instale la AWP.

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

Agrega tu propia solicitud de instalación

Si tu AWP tiene casos de uso en los que es útil que el usuario instale tu app Por ejemplo, si tiene usuarios que utilizan su aplicación más de una vez a la semana, Promover la instalación de tu AWP dentro de la IU web de tu app

Para agregar tu propio botón de instalación personalizado, busca el beforeinstallprompt. Cuando se activa, guardar una referencia al evento y actualizar tu interfaz de usuario para que el usuario saben que pueden instalar su aplicación web progresiva.

Patrones para promover la instalación de tu AWP

Existen tres formas clave de promover 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 aplicación como banners, botones en el encabezado o el menú de navegación, etc.
  • Los patrones promocionales intercalados entrelazan las promociones en el contenido del sitio.

Consulta los patrones para promover la instalación de AWP (dispositivos móviles) para obtener más información. Si bien se enfoca en los dispositivos móviles, muchos de los patrones se pueden aplicar para computadoras de escritorio o pueden modificarse fácilmente para que funcionen en las experiencias de escritorio.