Detección de navegador | JavaScript | Determine las preferencias del usuario

Si realmente debe hacerlo, detectar qué navegador está usando alguien es fácil con JavaScript.

Imagen de vista previa de la página de demostración de detección del navegador.

Ver demostración

Descargar código fuente de GitHub

JavaScript tiene un objeto estándar llamado navigator que contiene datos sobre el navegador que se está utilizando.

La navigator El objeto tiene muchas propiedades, pero el .userAgent property (una cadena que contiene datos sobre el navegador, el sistema operativo y más) es todo lo que necesitaremos.

Si quisiéramos mostrar el valor de navigator.userAgent, podríamos hacer una de las siguientes cosas:

Alerta

// Display in an alert box
alert(navigator.userAgent);

Valor de navigator.userAgent en Firefox 30 en Windows 7

Document.write

// Write it in the HTML document
document.write(navigator.userAgent); 

console.log ()

// Display it in the browser's developer tool
// This is ideal
// Use console.log() when you're developing/experimenting JavaScript
console.log(navigator.userAgent);

Si estaba usando Internet Explorer 11 en Windows 7, el resultado será:

Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; MASM; .NET4.0C; .NET4.0E; rv:11.0) like Gecko

Como puede ver, el problema con navigator.userAgent es que es una cadena gigante, y tampoco es muy legible por humanos.

Entonces, si quisiera trabajar con la información o mostrársela al usuario, primero tendré que analizar la cadena.

El problema es que soy extremadamente y vergonzosamente incompetente con las expresiones regulares (entre muchas otras cosas), así que me alegro de que exista la biblioteca JavaScript Detect.js de Darcy Clarke.

Detect.js podrá analizar el valor de la cadena en un objeto JavaScript legible y operable.

Para mostrar el nombre del navegador, la versión del navegador y el sistema operativo en nuestra consola, así es como podríamos hacerlo:

// Create 'user' object that will contain Detect.js stuff
// Call detect.parse() with navigator.userAgent as the argument
var user = detect.parse(navigator.userAgent);

// Display some property values in my browser's dev tools console
console.log(
  user.browser.family
  user.browser.version
  user.os.name
);

En Firebug, esto es lo que veré:

Firefox 30 Windows 7

Registro de la consola de Firebug.

Y esto es lo que veré en Chrome DevTools usando la misma máquina:

Chrome 35 Windows 7

console.log () de Chrome DevTools

Para apuntar a un navegador específico, puede usar declaraciones condicionales.

Por ejemplo, si desea apuntar solo a Safari de escritorio, puede hacer esto:

if (user.browser.family === 'Safari') {
  alert('You're using the Safari browser');   
}

Registro de la consola de Chrome DevTools.

Aquí hay una tabla de todas las propiedades analizadas:

PropiedadDescripción
browser.familyNombre del navegador
browser.nameNombre y número de versión del navegador
browser.versionVersión completa del navegador
browser.majorNúmero de versión principal del navegador
browser.minorNúmero de versión secundaria del navegador
browser.patchNúmero de parche del navegador
device.familyNombre del dispositivo
device.nameNombre y versión del dispositivo
device.versionVersión completa del dispositivo
device.majorNúmero de versión principal del dispositivo
device.majorNúmero de versión secundaria del dispositivo
device.patchNúmero de parche del dispositivo
device.typeTipo de dispositivo (p. Ej., «Escritorio» o «Móvil»)
device.manufacturerFabricante del dispositivo
os.familyNombre del sistema operativo
os.nameNombre del sistema operativo una versión completa
os.versionVersión completa del sistema operativo
os.majorNúmero de versión principal del sistema operativo
os.minorNúmero de versión secundaria del sistema operativo
os.patchNúmero de parche del sistema operativo

Nota: Si alguna propiedad no se puede analizar, su valor será null o undefined. Si va a mostrar la información a sus usuarios, debe tener instrucciones condicionales para null y undefined.

Por qué no debería utilizar la detección de navegador de JavaScript

No recomiendo utilizar la detección de navegador de JavaScript.

Y nunca, nunca debería utilizar las técnicas que he descrito para algo que sea de misión crítica.

¿Por qué?

La detección del navegador JavaScript no es confiable

El usuario puede desactivar JavaScript.

Además, hay muchos navegadores y versiones de navegador, y habrá más en el futuro, lo que hace que la detección del navegador sea poco práctica y no se pueda mantener como parte de una base de código siempre actualizada.

La detección de características es una mejor opción

Si está utilizando la detección de navegador de JavaScript con el fin de verificar si el usuario tiene una determinada capacidad de navegador, como una nueva API HTML5 como WebRTC o Canvas o lo que sea, es mucho mejor determinar en tiempo real si esa capacidad es disponible.

Usaré WebRTC para demostrar mi punto. Según caniuse.com, este es el estado de compatibilidad del navegador de WebRTC:

Fuente: caniuse.com

En la tabla de compatibilidad del navegador anterior, el rojo es incompatible y el verde es compatible.

Si usáramos la detección del navegador para determinar si el cliente puede usar WebRTC, requeriría un montón de declaraciones condicionales. Y cada vez que se lanza una nueva versión del navegador, tendríamos que actualizar nuestro código.

Además, solo estamos hablando de los trece navegadores enumerados en la tabla de soporte; todavía no estamos contabilizando los otros navegadores web actualmente en el mercado, así como los navegadores que aún no se han creado.

Y debo señalar que el uso de algún tipo de tabla de referencia compatible con el navegador tampoco es confiable. Es actualizado y mantenido por personas como usted y como yo (aunque algunos están automatizados usando un script de detección de características). Y al igual que tú y yo, la vida a veces se interpone en el camino para mantener nuestro trabajo.

En cambio, es una buena idea verificar en tiempo real si la función que queremos utilizar está disponible en el navegador del cliente. Esta técnica se llama detección de características.

¿Cómo podemos detectar si la función WebRTC está disponible en el navegador?

Bueno, sabemos que un navegador compatible con WebRTC debe tener la getUserMedia() función, por lo que podríamos comprobar para ver si podemos invocarlo.

El siguiente código prueba la capacidad WebRTC del cliente y muestra un cuadro de alerta si la función está disponible. Esto se tomó prestado y se adaptó de MDN:

// hasWebRTC is undefined
// if .getUserMedia() (and its variants) is not available
var hasWebRTC = navigator.getUserMedia ||
                navigator.webkitGetUserMedia ||
                navigator.mozGetUserMedia ||
                navigator.msGetUserMedia;

if (hasWebRTC) {
  alert('This browser is fully or partially WebRTC-capable');
}

Utilice la biblioteca JavaScript de Modernizr para una detección de funciones del navegador más sofisticada.

La única razón que se me ocurre para la detección del navegador JavaScript es una mejora progresiva no esencial. Por ejemplo, si quisiera agregar algo a la experiencia de las personas que usan un navegador específico, entonces la detección del navegador JavaScript es una solución muy rápida (y muy sucia).

Ver la fuente de la demostración en GitHub

contenido relacionado

Facebooktwitterlinkedintumblr

Deja un comentario

16 − 5 =

PowebDesign

© All rights reserved 2016 PowebDesign

Realizado ❤ en WordPress

Precios anti covid!

pagina web 230€

  • Web de 5 páginas: Inicio, quienes somos, contacto, productos etc..
  • Creada con WordPress para que la puedas ampliar.
  • No cobramos hasta que estés conforme con nuestro trabajo.

tienda online 300€

  • Autogestionada: Te mando un videotutorial para que aprendas a subir tus propios productos.
  • Sin letra pequeña: Dominio y hosting incluido el primer año, después 75€ al año.
  • Pasarela de pago, diseño y 10 primeros productos incluidos. Alta en Google Incluida.
Abrir chat