Al momento de desarrollar aplicaciones web, es indispensable pensar en la adaptabilidad de cualquier aplicación web y uno de estos aspectos pasa por detectar de manera programática el tipo de dispositivo con el cual se está accediendo a la aplicación: ¿es un dispositivo móvil o un ordenador de escritorio?.
Experiencia del Usuario (UX) Optimizada
La experiencia del usuario es primordial, si la aplicación tarda mucho tiempo en aparecer o aparecen muchos elementos que no son importantes, y esto es un factor importante si se accede a la app web desde un dispositivo con pantalla reducida como un teléfono, se debe de adaptar la interfaz en base a los criterios anteriormente descritos y con esto, mejorar la usabilidad y la satisfacción del usuario.
Rendimiento y Carga Eficiente
Los dispositivos móviles suelen tener recursos más limitados en comparación con los ordenadores. Detectar el tipo de dispositivo nos permite cargar sólo los elementos necesarios por ejemplo, si tenemos un blog, y tenemos en un lateral un menú de opciones y publicidad, en el modo móvil podemos evitar que se cargue la misma dando prioridad al contenido que el cliente quiere visualizar.
SEO y Posicionamiento en Buscadores
En una aplicación tipo blog el SEO no puede faltar, y es que precisamente los dos aspectos mencionados anteriormente son fundamentales para que motores como Google verifiquen que el modo móvil presentado es óptimo y no tiene elementos que compliquen la navegabilidad de la aplicación.
Compatibilidad con Tecnologías Emergentes
La aplicación es más que código en Laravel, la experiencia desde el lado del cliente es fundamental, puede que exista alguna tecnología experimental que solamente funcione en algunos dispositivos y que puedes definir para que funcionen en estos dispositivos, obviando los demás.
En esta entrada vamos a conocer una tecnología que nos permitirá crear los cimientos para lograr lo anteriormente señalado, que son solamente algunos puntos que debemos de tener en cuenta y de la importancia de detectar el tipo de dispositivo.
Este paquete, permite determinar entre una gran cantidad de dispositivos como:
- isiPhone()
- isXiaomi()
- isAndroidOS()
- isiOS()
- isiPadOS()
Aunque, usualmente lo que queremos es determinar si un usuario está navegando por nuestra aplicación en Laravel mediante un teléfono o computador, para ello, tenemos acceso a la siguiente función:
$detect = new MobileDetect();
$detect->isMobile();Este es un paquete para PHP y no específico para Laravel, aunque Laravel tiene unos pocos paquetes para lograr este objetivo:
Al momento en el cual se escriben estas palabras, llevan varios años sin actualizar y no funcionan es las últimas versiones de Laravel, asun así, este paquete lo podemos emplear in mayor problema; desde nuestro proyecto en Laravel, ejecutamos el siguiente comando de composer:
$ composer require mobiledetect/mobiledetectlibPara emplearlo, podemos crear una función de ayuda, como vimos en el apartado de los helpers:
function isMobile()
{
$detect = new MobileDetect();
// var_dump($detect->getUserAgent()); // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) ..."
try {
return $detect->isMobile(); // bool(false)
} catch (\Detection\Exception\MobileDetectException $e) {
}
return false;
// try {
// $isTablet = $detect->isTablet(); // bool(false)
// // var_dump($isTablet);
// } catch (\Detection\Exception\MobileDetectException $e) {
// }
}Y con esto, podremos acceder a la función isMobile() desde cualquier parte de nuestra aplicación, ya sea un archivo blade, controlador u otro.
- Andrés Cruz
In english
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter