Javascript para comprobar si PWA o Mobile Web

Si encuentras alguna incompatibilidad en tu código o trabajo, recuerda probar siempre en un ambiente de testing antes añadir el código al proyecto final.

Solución:

Si esto es para fines analíticos, puede configurar la URL de inicio en el archivo de manifiesto para incluir una consulta string parámetro, por ejemplo:

"start_url": "./?mode=standalone"

Luego, en su JavaScript, puede verificar esta consulta string parámetro.

Actualizado (2020-08-19)

Pete LePage escribió un blog sobre cómo configurar una dimensión personalizada en Google Analytics usando el código a continuación que verifica el modo de visualización usando window.matchMedia:

let displayMode = 'browser';
  const mqStandAlone = '(display-mode: standalone)';
  if (navigator.standalone || window.matchMedia(mqStandAlone).matches) 
    displayMode = 'standalone';
  
ga('set', 'dimension1', displayMode);

Lea más: https://petelepage.com/blog/2020/08/measure-understand-how-installed-pwa-users-differ-from-browser-tab-users/

Actualizado (2017-01-20):

Alternativamente, puede verificar en JavaScript usando:

if (window.matchMedia('(display-mode: standalone)').matches) 
  console.log("This is running as standalone.");

Edición del 11 de octubre de 2019: Se agregó un interruptor adicional para verificar si la aplicación se inicia a través de TWA – document.referrer.includes(‘android-app://’)

Esto funciona para todos: TWA, Chrome y Safari:

const isInStandaloneMode = () =>
      (window.matchMedia('(display-mode: standalone)').matches) || (window.navigator.standalone) || document.referrer.includes('android-app://');

 if (isInStandaloneMode()) 
    console.log("webapp is installed")

if (window.matchMedia('(display-mode: standalone)').matches) 
  console.log("This is running as standalone.");

Esta respuesta es correcta, pero vale la pena mencionar que PWA podría ejecutarse en muchos modos de visualización:

• pantalla completa
• ser único
• interfaz de usuario mínima
• navegador

Si ejecuta su PWA en un modo de ‘pantalla completa’, volverá false por lo que se necesitan verificaciones adicionales como:

function isPwa() 
    return ["fullscreen", "standalone", "minimal-ui"].some(
        (displayMode) => window.matchMedia('(display-mode: ' + displayMode + ')').matches
    );

Tenga en cuenta que window.matchMedia el cheque regresará true para el modo de visualización ‘navegador’ incluso cuando no es una aplicación PWA instalada.

Si entiendes que te ha resultado provechoso nuestro post, sería de mucha ayuda si lo compartieras con más programadores de esta forma nos ayudas a extender nuestro contenido.

---

---

Utiliza Nuestro Buscador