Mostrar un mensaje para invitar a los usuarios a instalar un PWA

Aunque tengas preparado un sitio web para que sea una aplicación web progresiva  (o PWA por sus siglas en Inglés) habilitando todas las funciones y configuraciones requeridas, tu usuario aún no tiene forma de saber que esta opción está disponible. Para informarles, puedes mostrar un mensaje en tu sitio web indicando que ya pueden instalar su aplicación web en cualquier dispositivo. Este mensaje, sólo aparecerá en dispositivos que aún no tengan instalada la aplicación.

Existen varias técnicas para realizar este proceso, en este ejemplo vamos a aprender a usar el método de javascript BeforeInstallPromptEvent.prompt() que va examinar el sistema del usuario, verifica si tu aplicación está instalada en su dispositivo y en caso de que aun no sea así, desplegar un mensaje invitando al usuario a instalar tu aplicación. El mensaje que despliega sería muy similar a este:

Este método no se puede usar directamente y necesita antes resolver el evento BeforeInstallPromptEvent que verifica la presencia de tu aplicación en el sistema.  Así que comenzamos incluyendo un listener para determinar si la aplicación PWA se encuentra efectivamente instalada localmente:

var beforeInstallPrompt = null;
window.addEventListener("beforeinstallprompt", eventHandler, errorHandler);


function eventHandler(event){
    beforeInstallPrompt = event;        
}
function errorHandler(e){
    console.log('error: ' + e);
}

También, el navegador requiere algún tipo de interacción del usuario antes de desplegar el mensaje, para evitar spam de aplicaciones que intenten aplicarse automáticamente, en este caso vamos a usar un botón en el HTML que invoque la función instalar()

<button id="installBtn" onclick="instalar()" disabled > Instalar PWA </button>

Este botón tiene intencionalmente habilitada la opción “disabled“ por defecto, la intención es que si la aplicación ya está instalada, el botón se muestre deshabilitado. Para modificar el botón vamos a actualizar el método eventHandler() para que remueva ese atributo y habilite de nuevo el botón solo en caso necesario.

function eventHandler(event){
    beforeInstallPrompt = event;
    document.getElementById('installBtn').removeAttribute('disabled');
}

Finalmente, incluimos el método que se invoca desde el botón, que invita al usuario a instalar el PWA

function instalar() {
    if (beforeInstallEvent) beforeInstallPrompt.prompt();
}

La versión completa del código sería así:

See the Pen Untitled by carlos (@carlosSolisModyo) on CodePen.

NOTAS IMPORTANTES

• Para que este código funcione tienes que tener un PWA funcional

• Recuerda que beforeinstallprompt es un evento que solo funciona cuando el PWA no está instalado en el sistema, si instalas la app para probar localmente, recuerda desinstalarla para que el código se vuelva a ejecutar.

• Para mejores resultados, realiza tus pruebas en Google Chrome.

Foto por Rodion Kutsaev en Unsplash.