La guía o código que verás en este artículo es la solución más eficiente y válida que hallamos a esta duda o dilema.
Solución:
Tal vez, ¿no mostrar el botón hasta que interceptes la ventana emergente automática?
o
En su código, verifique si la ventana es independiente
Si es así, no necesita mostrar el botón
if (window.matchMedia('(display-mode: standalone)').matches)
// do things here
// set a variable to be used when calling something
// e.g. call Google Analytics to track standalone use
Mi probador de ejemplo aquí
https://a2hs.glitch.me
Código fuente de mi probador
https://github.com/ng-chicago/AddToHomeScreen
Para responder a la pregunta original. Con las últimas versiones de Chrome puedes usar window.navigator.getInstalledRelatedApps(). Devuelve una promesa con un array de aplicaciones instaladas que su aplicación web especifica como relacionadas en manifest.json. Para permitir que esto funcione, debe agregar related_applications campo para manifestar.json
"related_applications": [
"platform": "webapp",
"url": "https://app.example.com/manifest.json"
]
Y luego puedes usarlo como:
//check if browser version supports the api
if ('getInstalledRelatedApps' in window.navigator)
const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) =>
//if your PWA exists in the array it is installed
console.log(app.platform, app.url);
);
Fuente: documentos API
Ahora puede mostrar algunos elementos dependiendo de si su aplicación está instalada. Por ejemplo: puede mostrar el botón “Abrir aplicación” y redirigir al usuario a PWA. Pero recuerde deshabilitarlo cuando el usuario ya esté en la aplicación usando la respuesta de @Mathias y verificando (display-mode: standalone)
Sin embargo, con respecto a su caso de uso. Debe mostrar el botón de instalación solo cuando beforeinstallprompt es interceptado. El navegador no activa este evento si el PWA ya está instalado en el dispositivo. Y cuando se dispara el aviso y choiceResult.outcome === 'accepted' escondes el botón de nuevo.
No veo cómo esta es la respuesta correcta, porque esto es básicamente una verificación si el usuario ya usa la aplicación, pero el comportamiento que no queremos es “Cuando el usuario está en la web e intenta instalar la aplicación nuevamente para decirle que ya tiene la aplicación en su dispositivo”. Para mí, esta no es una respuesta que resuelva esto.
Lo que podemos hacer es: 1. Cuando el usuario hace click en instalar pero tiene la aplicación en su dispositivo En este caso la beforeinstallprompt evento NO SERÁ despedido por lo que este evento volverá null. Almacenamos el resultado en una variable global y cuando el resultado es null le mostramos esto al usuario que ya tiene la aplicación instalada. 2. Cuando el usuario hace clic en instalar pero no tiene la aplicación en su dispositivo En este caso la beforeinstallprompt evento Estarán despedido, por lo que este evento devolverá el acceso para mostrar el aviso. Podemos almacenar el resultado en una variable global y si no es NULL (que no lo será) porque beforeinstallprompt será despedido si el usuario no tiene la aplicación en su dispositivo, mostramos el mensaje () al usuario.
Dudo que la mía también sea buena, pero creo que la pregunta y la respuesta correcta no tienen nada en común.
window.addEventListener("beforeinstallprompt", event =>
window.deferedPrompt = event;
);
handleButtonClick = () =>
const promptEvent = window.deferedPrompt;
if(!promptEvent)
// DO SOMETHING
//Show the add to home screen prompt
promptEvent.prompt()
promptEvent.userChoice.then((result: any) =>
// Reset the deferred prompt variable, since
// prompt() can only be called once.
window.deferedPrompt = null;.
);
Si te ha resultado de provecho este artículo, sería de mucha ayuda si lo compartes con el resto juniors y nos ayudes a difundir este contenido.