Detectando navegadores de móviles (PHP y Javascript)

Es habitual en los tiempos que correr desarrollar una página web para navegadores de escritorio y otras optimizadas para el uso en navegadores móviles (smartphone, tablet). Una maquetación puede parecer cojonuda para una pantalla grande, de un sobremesa, pero ser incómoda en una pantalla de cuatro pulgadas.

En ese caso tenéis dos posibilidades: detectar el dispositivo móvil en el servidor (PHP) o en el cliente (javascript). El ejemplo para PHP sería el siguiente:

<?php
$mobile_browser = ’0';

//$_SERVER['HTTP_USER_AGENT'] -> el agente de usuario que está accediendo a la página.
//preg_match -> Realizar una comparación de expresión regular
if(preg_match(‘/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone)/i’,strtolower($_SERVER['HTTP_USER_AGENT']))){
	$mobile_browser++;
}

//$_SERVER['HTTP_ACCEPT'] -> Indica los tipos MIME que el cliente puede recibir.
if((strpos(strtolower($_SERVER['HTTP_ACCEPT']),’application/vnd.wap.xhtml+xml’)>0) or
((isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE'])))){

	$mobile_browser++;
}

$mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'],0,4));
$mobile_agents = array(
‘w3c ‘,’acs-’,'alav’,'alca’,'amoi’,'audi’,'avan’,'benq’,'bird’,'blac’,
‘blaz’,'brew’,'cell’,'cldc’,'cmd-’,'dang’,'doco’,'eric’,'hipt’,'inno’,
‘ipaq’,'java’,'jigs’,'kddi’,'keji’,'leno’,'lg-c’,'lg-d’,'lg-g’,'lge-’,
‘maui’,'maxo’,'midp’,'mits’,'mmef’,'mobi’,'mot-’,'moto’,'mwbp’,'nec-’,
‘newt’,'noki’,'oper’,'palm’,'pana’,'pant’,'phil’,'play’,'port’,'prox’,
‘qwap’,'sage’,'sams’,'sany’,'sch-’,'sec-’,'send’,'seri’,'sgh-’,'shar’,
‘sie-’,'siem’,'smal’,'smar’,'sony’,'sph-’,'symb’,'t-mo’,'teli’,'tim-’,
‘tosh’,'tsm-’,'upg1',’upsi’,'vk-v’,'voda’,'wap-’,'wapa’,'wapi’,'wapp’,
‘wapr’,'webc’,'winw’,'winw’,'xda’,'xda-’);
//buscar agentes en el array de agentes
if(in_array($mobile_ua,$mobile_agents)){
	$mobile_browser++;
}

//$_SERVER['ALL_HTTP'] -> Todas las cabeceras HTTP
//strpos -> Primera aparición de una cadena dentro de otra

if(strpos(strtolower($_SERVER['ALL_HTTP']),’OperaMini’)>0) {
	$mobile_browser++;
}

if(strpos(strtolower($_SERVER['HTTP_USER_AGENT']),’windows’)>0) {
	$mobile_browser=0;
}

if($mobile_browser>0){
//Aquí redireccionamos hacia la aplicación móvil
}else{
//Aquí nos vamos a la versión para escritorio
}
?>

Se trata de una vieja función que econtré hace tiempo y detecta todo tipo de navegadores. La utilicé en mi proyecto de fin de curso y funcionaba. Utiliza un array con referencias a muchos navegadores de dispositivos móviles. La función de javascript por su parte es más sencillita y detectará el SO:

 var ua = navigator.userAgent.toLowerCase();
 var isAndroid = ua.indexOf("android") > -1; // && ua.indexOf("mobile");
 var isiPhone = ua.indexOf("iphone") > -1;
 var isiPod = ua.indexOf("ipod") > -1;
 var isiPad = ua.indexOf("ipad") > -1;
 if(!isiPad) isiPad = /iPad/i.test(ua) || /iPhone OS 3_1_2/i.test(ua) || /iPhone OS 3_2_2/i.test(ua);
 var isWPx = ua.indexOf("windows phone") > -1;

En este caso detecta si se trata de Android, un dispositivo Apple o WindowsPhone.

En último caso, en el siguiente enlace tenéis ejemplos de código actualizados para varios lenguajes. Os puede servir de mucha ayuda.

El API de geolocalización en HTML5

Aunque la geolocalización no forme parte de la especificación original de HTML5 (al menos según dice el manual de Remy Sharp, que es el que en un primer momento fue manual de referencia), su funcionalidad es una de las más atractivas e interesantes de dicho lenguaje, sobre todo en un contexto de web cada vez más orientada a dispositivos móviles (tablet, smartphone).

En fin, el API de geolocalización de HMTL5 permite que el navegador acceda a los datos de la posición del dispositivo desde el que se está accediendo a la web, ya sea por triangulación usando el GPS, o el GSM del teléfono; o a través de la posición de tu dirección IP.

El API posee tres métodos básicos:

  • getCurrentPosition(): Recoge la posición del dispositivo una vez.
  • watchPosition(): Recupera y actualiza la posición conforme va cambiando.
  • clearWatch(): Detiene la actualización de la posición.

En caso de éxito, getCurrentPosition() y watchPosition() devuelven un objeto Position, formado a su vez por un objeto coords (con todas las coordenadas) y un timestamp. El objeto coords tiene varias propiedades, algunas reconocidas por todos los navegadores y otras no:

  • latitude: un número flotante de sólo lectura que indica la latitud.
  • longitude: un número flotante de sólo lectura que indica la longitud.
  • accuracy: un número flotante de sólo lectura que indica la precisión de la longitud y la latitud en metros.
  • altitude: un número flotante de sólo lectura que indica la altura. No todos los dispositivos los permiten, en esos casos viene a nulo
  • altitudeAccuracy: un número flotante de sólo lectura que indica la precisión de la altura en metros. No todos los dispositivos los permiten, en esos casos viene a nulo
  • heading: un número flotante de sólo lectura que indica la dirección y el recorrido, expresada en grados. No todos los dispositivos los permiten, en esos casos viene a nulo
  • speed: un número flotante de sólo lectura que indica la velocidad de desplazamiento, expresada en metros por segundo. No todos los dispositivos los permiten, en esos casos viene a nulo

Ahora que te has leído la teoría, lo mejor es un ejemplo práctico, similar al que aparece en el manual de Lawson y Sharp (Introducing HTML5):

if(navigator.geolocation){
    navigator.geolocation.getCurrentPosition(function (position{
        var coordenadas = position.coords;
        showMap(coordenadas.latitude, coordenadas.longitude, coordenadas.accuracy);
    });
}else{
    window.alert("El navegador no soporta el API de geolocalización");
}

Plantéate que sería un código que llame a una función que genere un mapa recibiendo las coordenadas (como las API de GoogleMaps o OpenStreetMap). Primero comprueba que el navegador soporte el API, luego almacena las coordenadas conseguidas con getCurrentPosition en una variable objeto y finalmente las envía a la función que genera el mapa.

En fin, un API con muchas posibilidades en las nuevas aplicaciones web para dispositivos móviles.

Utilizando el cache de páginas con PHP

Cuando desarrollamos una página en PHP que necesita cargar información desde una base de datos nos encontramos que, en principio, se lanza una petición a la base de datos con cada recarga, que luego se procesa con el código PHP. Si tenemos una página web con poco tráfico (un blog, la página web de un grupo musical o un negocio), una web cuya información no cambie mucho, nos puede interesar crear un archivo de cache para evitar esta recarga. Esto ralentizará un poco la primera carga de la web, pero agilizará las sucesivas recargas de la misma, facilitando la navegación. En caso de páginas web optimizadas para dispositivos móviles (smartphone y tabs), que suelen depender de redes más lentas que los PC (por tirar de conexión 3G) es una opción muy válida.

Lo primero es crear una carpeta con permisos de escritura a la que llamaremos cache/ para almacenar ahí los archivos. Ok, allright, yeah man. Cuando nos metamos con el código (que pondré en un ejemplo más abajo) tenemos que pensar que hay que establecer un tiempo de expiración de la página, ya que si no no se recargaría nunca. Lo mejor es darle un tiempo que creamos prudencial para que sea eficiente sin llegar a dejar desactualizado al usuario. En fin, teniendo en cuenta todo esto, el código sería el siguiente:

$archivoCache = "cache/".$elnombrequecorresponda.".html"; //El archivo con el caché
$tiempoCache = 600; // el parámetro va en segundos, así que serían 10 minutazos

if (file_exists($archivoCache) && (time() - $tiempoCache
< filemtime($archivoCache)))
{
    include($archivoCache);
    echo "\n";
    exit;
}
ob_start(); //inicialización del buffer de salida

//Aquí iría el código PHP y HTML que corresponda

$fp = fopen($archivoCache, 'w'); //Abrimos el archivo con el cache

fwrite($fp, ob_get_contents());//Escribirmos el archivo
fclose($fp);//Cerramos el archivo IMPORTANTE!!!!! que mucha gente se olvida
ob_end_flush(); //limpiamos el buffer para evitar errores

En fin, creo que con estas instrucciones comentada ya os vais pispando todos de cómo funciona la cosa. Par el ejemplo di un tiempo de 10 minutos (ajustad vosotros según creáis conveniente) y la variable $elnombrequecorresponda pues… eso, que ahí ponéis el nombre que corresponda al archivo que queréis cachear.

En fin, chavatares, con esto me voy a dormir, que es tarde… o puede que no, porque no se si mi ordenador a cambiado o no la hora automáticamente. Si mañana llego tarde a todas partes le echaré la culpa. Un cibersaludo!!