Como detectar dispositivos con Javascript

En la era “mobile first” todo website necesita detectar dispositivos o tipo de dispositivo para mostrar contenido y/o publicidad específica para el usuario. Es decir, acercar más al usuario con la información de nuestro website.

Supongamos que un usuario visita nuestro website desde su smartphone, y queremos desplegar recomendación de productos en una tienda online, de artículos en una revista o recomendar descargar una aplicación móvil para su smartphone.

El 90% de los navegadores para dispositivos móviles tiene soporte para el objeto javascript “navigator”, que permite detectar el tipo de dispositivo, sea Android, iPad, iPhone, iPod incluso windows phone. Este objeto cuenta con tres (3) métodos en los cuales podemos extraer la información del dispositivo: userAgent, vendor y opera. Este último para detectar los navegadores Opera.

Para hacer uso de este objeto y sus métodos, vamos a declara una variable para almacenar cual de los tres métodos aplica para el usuario actual:

var userAgent = navigator.userAgent || navigator.vendor || window.opera;

Una vez extraemos la información del tipo de dispositivo y navegador podemos comparar su contenido con los diferentes User Agent data que provee cada uno de ellos. Para esto utilizamos el método “test” de javascript que permite comparar un string o texto dentro de una cadena de textos mayor.

Para el caso de Android, comparamos contra el string “/android/i”. Este string incluyendo las barras y la letra “i” al final para validar que en efecto sea un dispositivo móvil:

if (/android/i.test(userAgent)) {
...
}

Para el caso de iOS, una de las ventajas que provee el objeto “navigator” es que podemos incluso detectar el dispositivo espécífico de la familia de Apple (iPad, iPhone, iPod):

if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
...
}

Noten que he incluido a la comparación el método MSStream del objeto “window”. Esto debido a que Microsoft incluye la palabra iPhone en Internet Explorer 11 o mayor para intentar engañar servicios como GMail, Google Calendar, Facebook y otros servicios con el objetivo de obtener acceso a todos los recursos de HTML5. Puedes leer más al respecto en este artículo de Microsoft Developer Network.

Finalmente comparamos contra Windows Phone. Al igual que con Android debemos incluir i:

if (/windows phone/i.test(userAgent)) {
...
}

Con estas comparativas if (), podemos comparar con cada uno de los dispositivos que deseamos. De esta forma podemos identificar que contenido o información deseamos mostrar al usuario como el ejemplo que les mencioné al inicio de este artículo.

Vamos a hacer un ejercicio práctico para ver como funciona el objeto javascript “navigator” en un sitio web. Nuestro objetivo será mostrar en nuestro sitio web el botón o badge para descargar un App que recomendaremos a los visitantes a nuestro sitio web.

Vamos a colocar en nuestro sitio los dos badges o imágenes alusivas a las dos tiendas más relevantes (Google Play y Apple App Store). En un archivo html vamos a incluir los badges. A cada una de las imágenes la identificaremos con una clase “class” para facilitar cuando mostrar el badge adecuado para el usuario:

<img src="https://play.google.com/intl/en_us/badges/images/badge_new.png" width="120" class="android">

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Download_on_the_App_Store_Badge.svg/1024px-Download_on_the_App_Store_Badge.svg.png" width="120" class="ios">

Ambas imágenes estarán disponibles en la versión desktop des nuestro sitio web. Para el caso de smarthphones y tablets, sólo mostraremos la imagen o badge de la tienda específica del dispositivo. Utilizaremos la misma sintaxis previa con if() para comparar el user agent del dispositivo y según el resultado ocultaremos la imagen que no sea el badge para la tienda del dispositivo del uusario. Esto lo haremos con las propiedades javascript “visibility” y “display” del método “style” para objetos javascript:

<script type="text/javascript">
    
    var userAgent = navigator.userAgent || navigator.vendor || window.opera;

    if (/android/i.test(userAgent)) {
         document.getElementsByClassName('ios')[0].style.visibility = 'hidden';
        document.getElementsByClassName('ios')[0].style.display = 'none';
    }
   
    if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
         document.getElementsByClassName('android')[0].style.visibility = 'hidden';
        document.getElementsByClassName('android')[0].style.display = 'none';
    }
</script>

En el código Javascript anterior lo que hacemos es capturar la información del objeto “navigator”. Comparamos las palabras incluidas por le navegador para cada dispositivo/navegador. Según el resultado de la comparación de cadena de caracteres ocultamos los demás elementos. Es decir, si la comparación contra “/android/i” es cierta (true), entonces ocultamos el badge con la clase “ios”. Si el resultado es true para “/iPad|iPhone|iPod/”, entonces ocultamos el elemento con la clase “android”. Voilá! podemos recomendar descargar el app desgún el dispositivo del usuario para llevarlo a la tienda correcta.

CODE IS POETRY!

Share this:

Like this: