Detectar navegación móvil en Laravel

▶

Al momento de desarrollar aplicaciones web, no solo nos preocupamos de como enviar emails, es indispensable pensar en la adaptabilidad de la aplicación. Uno de los aspectos más importantes es detectar de manera programática el tipo de dispositivo desde el cual se accede: ¿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 en cargar o muestra elementos innecesarios, especialmente en dispositivos con pantallas reducidas como los teléfonos, debemos adaptar la interfaz.
Esto mejora la usabilidad y la satisfacción del usuario, garantizando que la aplicación sea funcional y eficiente según el tipo de dispositivo.

Rendimiento y Carga Eficiente

Los dispositivos móviles suelen tener recursos más limitados que los ordenadores. Detectar el tipo de dispositivo nos permite cargar solo los elementos necesarios.
Por ejemplo, en un blog, podemos evitar cargar menús laterales o publicidad en la versión móvil, dando prioridad al contenido que el usuario quiere visualizar.

SEO y Posicionamiento en Buscadores

En aplicaciones como blogs, el SEO es fundamental. La optimización de la versión móvil mejora la navegación y garantiza que motores como Google reconozcan que la aplicación ofrece una experiencia óptima sin elementos innecesarios.

Compatibilidad con Tecnologías Emergentes

La aplicación no es solo código en Laravel; la experiencia del cliente también importa.
Algunas tecnologías experimentales funcionan solo en ciertos dispositivos. Detectar el tipo de dispositivo nos permite habilitarlas solo donde sean compatibles, ignorando los demás dispositivos.

Paquetes para Detectar Dispositivos

Existen varios paquetes que nos ayudan a determinar el tipo de dispositivo. Algunos ejemplos incluyen:

• 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:

• https://github.com/riverskies/laravel-mobile-detect
• https://github.com/jenssegers/agent

Al momento en el cual se escriben estas palabras, ambos paquetes llevan varios años sin actualizarse, por lo que no funcionan con las últimas versiones de Laravel.

Podemos usar MobileDetect directamente en Laravel sin problemas:

Instalación del Paquete MobileDetect

$ composer require mobiledetect/mobiledetectlib

Con esto, podemos usar isMobile() desde cualquier parte de la aplicación: Blade, controladores o servicios.

Aplicaciones Prácticas

Detectar el tipo de dispositivo permite:

1. Optimizar la UI: mostrar u ocultar elementos según el dispositivo.
2. Reducir la carga de recursos: no enviar scripts o estilos innecesarios en móviles.
3. Mejorar la eficiencia y tiempos de respuesta, especialmente en dispositivos limitados.
4. Optimizar SEO: evitando contenido redundante en móviles.

Cómo Implementarlo en Laravel

Crear un archivo helper.php dentro de app/Helpers que es un archivo de ayuda.

Registrar el helper en composer.json:

"autoload": {
   "psr-4": {
       "App\\": "app/"
   },
   "files": [
       "app/Helpers/helper.php"
   ]
}

Ejecutar:

$ composer dump-autoload

Crear la función isMobile() como se mostró anteriormente:

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:

@if(isMobile())
  <!-- Contenido exclusivo para móviles -->
@else
  <!-- Contenido para PC -->
@endif

Explorando Funciones Avanzadas

MobileDetect permite detectar muchos dispositivos y características, por ejemplo tablet, iOS, Android, etc.
Aunque generalmente solo necesitamos saber si es móvil o PC, podemos explorar otras funciones inspeccionando el código fuente del paquete.

Resultado y Prueba

Al probarlo en el navegador:

• En PC: isMobile() devuelve false.
• En móvil: isMobile() devuelve true.

Esto permite adaptar la interfaz y el contenido según el dispositivo de manera sencilla y eficiente, sin depender de CSS únicamente.

Conclusión

Aunque MobileDetect no es específico de Laravel, podemos integrarlo fácilmente mediante helpers.
Esto nos permite tener funciones nativas en nuestra aplicación y utilizar toda la potencia de detección de dispositivos para optimizar la UX, mejorar la carga y mantener un SEO efectivo.