Actualmente el tráfico mobile incrementa día a día comiendo un gran terreno al tráfico desktop. Un gran porcentaje de personas emplean sus dispositivos para navegar por Internet, lo que significa que nuestras webs deben estar optimizadas y ser capaces de dar una buena experiencia de usuario para estos dispositivos, de igual manera que ofrecemos en la versión desktop.
Hay distintas estrategias de atacar la problemática, y hay controversias pues hay profesionales que prefiere trabajar su versión mobile totalmente con una estrategia responsive web design para optimizar SEO y otras razones, y sin embargo hay otros que prefieren servir la versión mobile en un subdominio (m.yourdomain.com).
La diferencia principal es que la primera estrategia no necesita ninguna acción del lado del servidor, ya que todo está en el lado cliente. La segunda estrategia requiere realizar acciones en el lado servidor, como crear nuevos subdominios y configurarlos correctamente y detectar el tipo de dispositivo para servir la versión correcta.
Para poder implementar la segunda estrategia, existen librerías que basadas en el User-Agent de la Request informan del tipo de dispositivo conectado. Un componente que nos aporta esta solución es el bundle MobileDetectBundle. Este bundle está basado en el proyecto Mobile_Detect, una ligera librería php que ofrece la funcionalidad de traducir estos.
En este artículo veremos como instalar e implementar este bundle en un proyecto Symfony y analizar un caso de uso en el que me resultó realmente útil esta estrategia.
Instalación del Bundle
Para instalar el componente añadimos el bundle a nuestro composer:
|
1 |
composer require suncat/mobile-detect-bundle |
Y lo damos de alta en nuestro AppKernel.php
|
1 2 3 4 5 6 7 8 9 10 |
<?php public function registerBundles() { $bundles = [ // ... new SunCat\MobileDetectBundle\MobileDetectBundle(), ]; } |
Ejemplo de uso
Una vez instalado el bundle podremos user el servicio @mobile_detect.mobile_detector y llamar a las funciones que exponepara detectar si se trata de un movil o una tablet:
|
1 2 3 4 5 6 |
$mobileDetector = $this->get('mobile_detect.mobile_detector'); if($mobileDetector->isTablet()){ // soy una tablet }else if($mobileDetector->isMobile()){ // soy un movil } |
También permite detectar el sistema operativo del dispositivo:
|
1 2 3 4 5 6 7 |
$mobileDetector->isAndroidOS(); $mobileDetector->isBlackBerryOS(); $mobileDetector->isPalmOS(); $mobileDetector->isSymbianOS(); $mobileDetector->isWindowsMobileOS(); $mobileDetector->isiOS(); $mobileDetector->isbadaOS(); |
O incluso el navegador que está visualizando nuestra web:
|
1 2 3 4 5 6 7 |
$mobileDetector->isChrome(); $mobileDetector->isSafari(); $mobileDetector->isDolfin(); $mobileDetector->isOpera(); $mobileDetector->isSkyfire(); $mobileDetector->isIE(); $mobileDetector->isFirefox(); |
Además de estos métodos, también incluye una serie de helpers de Twig para poder comprobar estas condiciones en nuestras plantillas:
|
1 2 3 4 5 6 7 |
{% if is_mobile() %} <h1>Movil</h1> {% endif %} {% if is_ios() %} <h1>Dispositivo iOS</h1> {% endif %} |
Por otro lado a parte de estas funcionalidaes, el bundle permite configurar las redirecciones a las versiones mobile y tablet si así lo deseáramos con un subdominio concretos.
|
1 2 3 4 5 6 7 8 9 |
mobile_detect: redirect: mobile: is_enabled: true host: http://m.midominio.es status_code: 301 action: redirect tablet: ~ switch_device_view: ~ |
También incorpora un nuevo elemento en la debug toolbar del entorno de dev para poder simular vistas desde deskop, tablet o mobile. Yo personalmente prefiero usar algún tipo de extensión como User-Agent Switcher para realizar estas pruebas, pero se agradece esta extensión de la barra de debug de Symfony.
Caso de Uso
El caso de uso en el que emplee este bundle, se trataba de una aplicación en el que se mostraban unas imágenes de producto con un rotado 360 horizontal. Estas imágenes se componen de un sprite horizontal con 30 frames que implican un tamaño de fichero bastante grande para dispositivos que se conectan a Internet con una conexión 3G o 4G. El usuario no creo que le haga mucha gracia que nos comamos su tarifa de datos.
Se decidió emplear una imagen estática para los dispositivos móvil, ya que tenía mas fuerza el argumento de que el rendimiento móvil sea bueno y la velocidad de carga rápida . Cambiando la plantilla que se renderizaba en el visualizador 3d por una imagen utilizando los helpers twig que nos aporta el bundle el problema estaba 100% solucionado.
Enlaces de Interés
http://ourcodeworld.com/articles/read/432/how-to-detect-mobile-devices-in-symfony-3
