Obtener nombre y versión del navegador usando Javascript

Introducción

Cuando se trata de programación web, es esencial comprender el entorno en el que se ejecuta tu aplicación. Una de las variables más importantes es el navegador web del cliente. Conocer el navegador y su versión puede ser crucial para personalizar la experiencia del usuario, asegurar la compatibilidad y solucionar problemas de manera efectiva. A continuación, veremos cómo podemos obtener estos datos utilizando JavaScript puro y una poderosa librería llamada bowser.

Extracción de información del navegador a través de UserAgent

El objeto navegador global en JavaScript tiene una propiedad llamada ‘UserAgent’, que es una cadena de texto conteniendo información sobre el navegador, la versión del navegador y el sistema operativo. Esta cadena puede ser analizada para extraer los datos que necesitamos. Usaremos expresiones regulares para este propósito, ya que nos permiten identificar patrones dentro de una cadena de texto.

Función para obtener el nombre y la versión del navegador

A continuación, te presento una función que utiliza expresiones regulares para parsear la cadena UserAgent y extraer de ella el nombre y la versión del navegador:

var getBrowserInfo = function() { var ua= navigator.userAgent, tem, M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=/))?s*(d+)/i) || []; if(/trident/i.test(M[1])){ tem= /rvs*:s*(d+)/g.exec(ua) || []; return 'IE '+(tem[1] || ''); } if(M[1]=== 'Chrome'){ tem= ua.match(/b(OPR|Edge)/(d+)/); if(tem!= null) return tem.slice(1).join(' ').replace('OPR', 'Opera'); } M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?']; if((tem= ua.match(/version/(d+)/i))!= null) M.splice(1, 1, tem[1]); return M.join(' '); }; console.log(getBrowserInfo());

Esta función primero define una variable ‘ua’ que contiene la cadena UserAgent. Utiliza la función ‘match’ para buscar en esta cadena patrones que identifican a los navegadores más conocidos y sus versiones. Por ejemplo, si el navegador es Chrome pero también se identifica como Opera, esta función tomará el nombre correcto de Opera. Finalmente, devuelve el nombre y la versión en una cadena formateada. Es importante mencionar que ‘tem’ es una variable temporal usada durante el proceso de parseo.

Uso de la librería bowser para identificación del navegador

Aunque JavaScript puro es poderoso, no siempre es la mejor solución cuando se trata de problemas de compatibilidad o identificaciones más complejas. Aquí es donde una librería como ‘bowser’ es extremadamente útil. Bowser es una librería JavaScript para detectar navegadores y sus versiones. Es simple de usar y proporciona una interfaz más detallada para obtener esta información.

<script src="https://cdnjs.cloudflare.com/ajax/libs/bowser/1.9.4/bowser.min.js"></script>
console.log(bowser.name, bowser.version);

Cuando incluyes la librería ‘bowser’, puedes acceder a su API para identificar el navegador. La librería tiene propiedades ‘name’ y ‘version’ que te permiten obtener el nombre y la versión del navegador respectivamente de una manera mucho más sencilla y directa que el análisis de UserAgent manualmente. ¿No es asombroso cómo una librería puede simplificar tanto el trabajo?

Conclusiones

Tanto los enfoques puros de JavaScript como el uso de ‘bowser’ tienen sus propios méritos. La elección entre uno y otro dependerá de tus necesidades específicas y de la complejidad de las búsquedas del UserAgent que necesitas realizar. Si deseas simplicidad y potencia, ‘bowser’ es una excelente opción. Sin embargo, para proyectos más ligeros o casos simples, el método basado en JavaScript puro puede ser más que suficiente. Esperamos que este tutorial te ayude a tomar la mejor decisión y a implementar la identificación del navegador de forma efectiva en tus proyectos futuros.

Te puede interesar

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *