Cómo saber si un usuario está utilizando tu web o tu app

Hay muchos casos en los que puede ser útil diferenciar entre una persona que está viendo tu sitio web en el navegador y una persona que lo está viendo a través de tu app. Tal vez quieras ver las analíticas de la adopción de tu aplicación por parte de los usuarios o quieras mostrar contenidos diferentes a los usuarios de la aplicación.

Al igual que hay múltiples casos de uso, también hay múltiples formas de lograr este objetivo. Veámoslas una a una.

En función del Agente de Usuario

El agente de usuario es una cadena corta que el navegador envía a los sitios web cada vez que carga una página. El agente de usuario contiene información sobre el navegador, por ejemplo un navegador Firefox podría enviar algo como este agente de usuario:

A partir de ahí, tu sitio web puede detectar que el usuario utiliza la versión 47.0 del navegador Mozilla Firefox. Al igual que los navegadores, tu aplicación también envía un agente de usuario que la identifica.

Agentes de usuario utilizados por la app

La app utiliza algunos agentes de usuario diferentes:

• $regularUserAgent App-WebView ($operatingSystem) $version
  Este es el agente de usuario típico utilizado por el navegador interno de la app (que muestra tu sitio web dentro de la app). Las solicitudes realizadas con este agente de usuario son iniciadas por el usuario de la app al navegar entre páginas.
• App-HttpClient $version
  Este es el cliente utilizado para las peticiones realizadas por la app que no son iniciadas directamente por el usuario. Por ejemplo, la aplicación realiza algunas peticiones con esto para almacenar partes del sitio web para su uso sin conexión. Hoy en día, el modo sin conexión está desactivado por defecto, así que probablemente no verás muchas solicitudes con este agente de usuario.

$version es la versión interna de la aplicación (por ejemplo, 1.4.8+52) y $operatingSystem es la plataforma en la que se utiliza la aplicación (por ejemplo, ios o android).

$regularUserAgent es el agente de usuario de un navegador móvil que se esperaría del dispositivo, como Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148

Así, un ejemplo de agente de usuario que la aplicación podría utilizar en iOS sería: Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 App-WebView (ios) 1.4.8+52

Filtrado para el agente de usuario de la aplicación

Basándote en el formato de agente de usuario anterior, puedes detectar que tu sitio web está siendo cargado por la aplicación comprobando si el agente de usuario contiene "App-WebView". Si quieres comprobar también el sistema operativo, puedes comprobar adicionalmente si el agente de usuario contiene también "(android)" o "(ios)".

Ejemplo: Mostrar contenido diferente en un sitio web de WordPress

Si utilizas WordPress, puedes utilizar el plugin "UserAgent Content Switcher". El nombre del plugin es bastante descriptivo: te permite mostrar contenido diferente a los usuarios en función de su agente de usuario. He aquí cómo puedes configurarlo (y un ejemplo de uso):

1. Instala el plugin en tu sitio web. Ten en cuenta que no estamos afiliados al plugin ni a su desarrollador, simplemente lo probamos y nos pareció que era gratuito y funcionaba bien.
2. En la página de configuración del plugin, añade un nuevo tipo con estos ajustes:
   • Nombre tipo: Aplicación
   • Atributo de código corto: app
   • Agente de usuario: App-WebView
3. Edita una de tus páginas y cambia al editor de código.
4. Ahora puedes crear secciones que sólo sean visibles en la aplicación, como ésta:

   
   Este texto es visible para todos.
   
   [agentsw ua='app']
   ¡Este texto sólo es visible para los usuarios de la app!
   [/agentsw]

   

Utilizar JavaScript

En función del Agente de Usuario

Por supuesto, no sólo puedes comprobar el agente de usuario en el lado del servidor (como se detalla en la sección anterior), sino también en JavaScript.

He aquí un ejemplo de cómo puedes utilizar JavaScript para detectar si el usuario está utilizando la aplicación o un navegador:

const isApp = navigator.userAgent.includes("App-WebView");
if (isApp) {
    console.log("The user is using the app.");
} else {
    console.log("The user is using a browser.");
}
    

Comprobando las modificaciones del HTML

La aplicación realiza pequeños cambios invisibles en el HTML del sitio web que son necesarios para algunas funciones de la aplicación. También podemos utilizar estos cambios para detectar si la página ha sido cargada por la aplicación.

Como esto es un poco complicado, te recomendamos que utilices ejecutarCuandoAplicaciónEstéPreparada desde el script de ayuda de la aplicación. Entonces puedes poner cualquier código dentro de la función executeWhenAppReady, y sólo se ejecutará si la página ha sido cargada por la aplicación. Un pequeño inconveniente de este método es que el código tarda unos milisegundos en ejecutarse, aunque la aplicación haya cargado la página.

Inyectando código en la aplicación

En la página de personalización de tu sitio web tienes la opción de añadir cualquier JavaScript o CSS que la aplicación deba inyectar en cada página que se cargue. Las posibilidades son infinitas con esto, pero como ejemplo, hagamos que este texto sea verde en la aplicación:

<p id="red-text" style="color: red;">This text is red in the browser.</p>

Ahora podríamos configurar este JavaScript para inyectarlo:

document.getElementById("red-text").style.color = "green";

O alternativamente, este CSS para inyectar:

#red-text {
    color: green !important;
}

Así que, como puedes ver, esto también sirve para tener un comportamiento diferente en el sitio web que en la aplicación.