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

Actualizado el 6. mayo 2024 por Jan Bunk

Un robot humanoide inspeccionando una app y un navegador para encontrar diferencias, arte digital

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

Filtrar por agente de usuario solo funciona si has configurado la app para que ajuste el agente de usuario que utiliza. Puedes activar esta opción en los ajustes de navegación de tu app. Abrir ajustes de navegación
Si no quieres activar esa opción, consulta los otros métodos de filtrado presentados en este artículo.

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:

Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0

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

With the Default WordPress Editor

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 Una captura de pantalla del formulario cumplimentado con la información anterior.
  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]
    Una captura de pantalla del texto anterior en el editor de código de WordPress.

With Elementor

If you're using Elementor, you can instead use the free Powerpack plugin with the powerpack-webtoapp extension plugin. Here's how it works:

  1. Install the Powerpack plugin through the WordPress store.
  2. Download the powerpack-webtoapp plugin as a zip file and install it.
    The powerpack-webtoapp plugin (and the idea to use Powerpack on Elementor websites) was created by ALL IN APPLI. They use the plugin to manage multiple webtoapp.design apps and generously decided to share it.
  3. Now you can set specific elements to only be displayed in the app. A screenshot of the Powerpack settings.

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.

Filtrar por agente de usuario solo funciona si has configurado la app para que ajuste el agente de usuario que utiliza. Puedes activar esta opción en los ajustes de navegación de tu app. Abrir ajustes de navegación

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.");
}
    
Como alternativa, puedes utilizar getAppPlatform desde el script de ayuda de la aplicación, que funciona de forma muy similar.

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;
}
Una captura de pantalla de la personalización del sitio web rellenada.

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

Artículos relacionados


Un robot humanoide utiliza una lupa para mirar un smartphone. El smartphone muestra las letras PWA en él, arte digital

Aplicaciones Web Progresivas vs. Aplicaciones Nativas

¿Quieres llevar tu sitio web al siguiente nivel? He aquí cómo las aplicaciones web progresivas se comparan con las aplicaciones nativas estándar y cómo convertir tu sitio web en una aplicación.

Un robot humanoide con un cronómetro físico supervisando una fábrica de robots que trabajan en escritorios, arte digital

Publicamos 238 Apps - Esto es lo que tardó la revisión de apps

Publicamos muchas aplicaciones y registramos el tiempo que tardaban en entrar en las tiendas de aplicaciones, incluidos los tiempos de rechazo y reenvío de la aplicación.

Imagen con texto: Preparar tu cuenta de desarrollador de Apple para actualizar tu aplicación existente

Pasos necesarios para que podamos actualizar tu app iOS existente

Esta guía explica todos los pasos que debes realizar para que podamos actualizar tu aplicación ya publicada en la Apple App Store.


Autor Jan Bunk
Escrito por
Jan Bunk

¡Hola, me llamo Jan! En 2019, creé webtoapp.design mientras estudiaba informática en la universidad. Desde entonces han cambiado muchas cosas: me gradué y ahora existe un equipo completo que dirige webtoapp.design. Hemos crecido hasta convertirnos en un equipo global y totalmente remoto, que ha acumulado mucha experiencia en el desarrollo y la publicación de aplicaciones. Hemos creado y publicado cientos de aplicaciones en las app stores, donde se han descargado cientos de miles de veces.