Obtener el nombre del navegador de un usuario que visita una página con PHP; además intentar parsearlo / interpretarlo para conocer el sistema operativo y dispositivo.
La información del navegador se encuentra en $_SERVER["HTTP_USER_AGENT"]
y su salida es algo como:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36
Esa es toda la información que se tiene sobre el navegador (ya que la IP está en otro lugar); en ella está incluido el sistema operativo y dispositivo, entre otros.
Recuerda que esta información no siempre es confiable, es decir, se puede modificar desde el cliente o puede incluso no estar disponible.
Además de eso, es un poco complejo parsear la cadena así que hay varias librerías que pueden hacer el trabajo por nosotros.
Como lo dije, a partir del User-Agent podemos intuir muchas cosas como sistema operativo o dispositivo, además de la familia del navegador web, todo esto obtenido desde PHP.
Existen muchas librerías y en este caso usaré esta, la cual puedes instalar con Composer usando:
composer require ua-parser/uap-php
Si no tienes composer mira un tutorial de instalación, y si tienes un proyecto de PHP que no está adaptado a composer mira cómo adaptarlo.
Una vez que hayas descargado la librería con Composer incluye el autoload:
require_once "vendor/autoload.php"
Ahora mira este ejemplo:
<?php
/**
* Demostrar uso de librería uap-php
*
* https://parzibyte.me/blog
*/require_once "vendor/autoload.php";
use UAParser\Parser;
# Podría venir de otro lado
$agenteDeUsuario = $_SERVER["HTTP_USER_AGENT"];
$parseador = Parser::create();
$resultado = $parseador->parse($agenteDeUsuario);
$familiaNavegador = $resultado->ua->family; // Chrome, Firefox, Safari, Edge
$navegador = $resultado->ua->toString();
$dispositivo = $resultado->device->family;
$familiaSistema = $resultado->os->family;
$sistema = $resultado->os->toString();
$completo = $resultado->toString();
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Información de navegador</title>
</head>
<body>
<strong>Familia de navegador: </strong> <?php echo $familiaNavegador ?><br>
<strong>Navegador: </strong> <?php echo $navegador ?><br>
<strong>Dispositivo: </strong> <?php echo $dispositivo ?><br>
<strong>Familia de OS: </strong> <?php echo $familiaSistema ?><br>
<strong>Sistema operativo: </strong> <?php echo $sistema ?><br>
<strong>Información completa: </strong> <?php echo $completo ?><br>
</body>
</html>
Debemos crear un parseador e invocar al método parse
, pasándole la cadena del agente de usuario.
Esta cadena puede ser tomada de $_SERVER
como lo mostré anteriormente, o de otro lugar. Por ejemplo, podrías hacer una API que indique los detalles del navegador usando PHP, la cual recibiría esta cadena desde el cliente.
Después de eso puedes acceder a ua
, device
y os
.
Nota: puedes ver más sobre la librería en el repositorio de GitHub.
Finalmente veamos algunos ejemplos en distintos navegadores web:
Como ves, Chrome en Android envía el nombre del dispositivo mientras que Firefox no.
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Esta web usa cookies.