0

hace tiempo estoy con este dilema.

Estoy conciente de que puedo saber si un usuario ABRE la PWA leyendo el valor de display del manifest.json, pero necesitaria saber si el usuario ya tiene instalada la PWA cuando ingresa via web, para mostrarle o no cierta informacion. Tendría que hacerlo con JavaScript nativo o como mucho, con JQuery.

Muchas gracias, cualquier ayuda es bienvenida.

3
  • 2
    Te dejo este enlace benborgers.com/posts/pwa-detect-installed
    – Yussef
    Commented el 3 feb. 2023 a las 14:41
  • Claro, es justamente para saber si se habre desde la PWA. Queria saber si yo puedo saber eso cuadno el usiario ingresa desde web. Commented el 3 feb. 2023 a las 17:32
  • Si ese código supuestamente hace eso, porque o se abre como nativa o se abre desde el navegador, no hay otra opción. Lamentablemente no tengo como probarlo por eso no puse una respuesta elaborada
    – Yussef
    Commented el 3 feb. 2023 a las 17:42

1 respuesta 1

0

Buen dia,

Para ello debes escuchar el evento beforeinstallprompt

Puedes hacerlo de dos formas

let prompt; // Estableces una variable
document.addEventListener('DOMContentLoaded', function () { //Al terminar de cargar la pagina
    window.addEventListener('beforeinstallprompt', (e) => { //Disparas al escucha del evento beforeinstallprompt 
        prompt=true; //Si aun no se ha instalado la pwa coloca la variable a true 
    });  
    //Ya que beforeinstallprompt en si, es una promesa no sabemos cuanto se tardara la respuesta
    //Yo coloque 1seg pero puede que tarde mas
    setTimeout(() => {
        if(prompt) console.log('Aun no se ha instalado la pwa'); else  console.log('Existe una pwa ya instalada');
    }, 1000);
});

O tambien puedes indicarlo en un boton

let prompt; // Estableces una variable
window.addEventListener('beforeinstallprompt', (e) => { //Disparas al escucha del evento beforeinstallprompt 
    prompt=e; //Le pasamos el evento a la variable
    pwa.style.display='block'; // hacemos visible el button
});  
pwa.addEventListener('click', (e) => { //Al presionar click
    pwa.style.display='none'; //Ocultamos el boton
    prompt.prompt(); //Indicamos a windows nos abra la notificacion de instalacion
    prompt.userChoice // Ejecutamos la promesa
        .then((choiceResult) => {
            if (choiceResult.outcome === 'accepted') {
                console.log('El usuario acepto el aviso de pwa');
            } else {
                console.log('El usuario descarto el aviso de pwa');
            }
            prompt = null; //Al regresar la varible a null beforeinstallprompt 
            //vuelve a disparase y por ende el boton se hara visible
        });
});
<body>
<button id="pwa" style="display: none;">Instala esta Progressive Web Apps</button>
</body>

Espero te sirva, saludos

2
  • Espectacular, Jefferson. Estaba buscando como utilizar la promesa para hacer justamente lo del segundo codigo. Commented el 4 feb. 2023 a las 12:51
  • Muchas gracias! Commented el 4 feb. 2023 a las 12:51

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.