Cargando



Cómo usar directiva rewrite del módulo Nginx

En este tutorial veremos cómo utilizar el agente del navegador para poder cambiar nuestras reglas rewrite desde Nginx.


jun 29 2014 17:10
Profesional
jul 29 2016 14:25

Cada navegador tiene un sello propio, gracias a esto en nuestro sitio podremos identificar de donde proviene una petición y desde que navegador se ha realizado, como bien sabemos el navegador Internet Explorer siempre ha traído quebraderos de cabeza a los desarrolladores web (aunque en los últimos tiempos ha mejorado), por ello podremos identificarle y mostrar reglas alternativas para solucionar estos pequeños problemas.

 

¿Para qué nos sirve?
Imaginemos que tenemos un sitio web como puede ser Facebook, donde ingresan millones de personas cada día, sin embargo no todas lo hacen desde el mismo tipo de dispositivos, hay gente que ingresa desde su PC de escritorio, otros desde una tablet, otros desde su móvil, etc. Cada dispositivo tiene un navegador (o varios) y este cuenta con un agente, si logramos identificar al mismo entonces podemos servir el contenido de una manera adecuada, ya que la visualización no es la misma para todos, cada dispositivo se vera de una forma, y cada navegador puede interpretar reglas de una forma distinta (aunque esto va bajando cada vez más).

 

Hemos hablado de que cada navegador cuenta con un agente que nos permite identificarlo, a continuación se deja un breve código en JavaScript para obtener el agente del navegador donde se use:

<html>
    <head>
        <title>Obtener user-agent</title>
    </head>
    <body>
        <script>
            document.write(navigator.userAgent)
        </script>
    </body>
</html>
El código script se ha incrustado en el HTML por comodidad. Si abrimos el código anterior en el navegador Google Chrome vemos lo siguiente:

 

 

Y si ahora lo hacemos en Internet Explorer:

 

 

Has comprobado que se abrió desde Windows para tomar las 2 capturas anteriores, si lo abrimos desde Mozilla Firefox en Linux vemos lo siguiente:

 

user-agent_3.jpg

 

Si quieres un código en un lenguaje para el servidor, a continuación se deja un código para ver cómo obtener el agente en PHP, recordemos que el JavaScript es posible que se el usuario lo deshabilite:

<?php
    echo $_SERVER['HTTP_USER_AGENT']
?>
Vamos a pasar ahora a lo que más nos interesa, para ello empezaremos viendo un ejemplo de lo que hemos hablado hasta ahora con nuestra página: Solvetic.

 

 

Comprobando Solvetic


Si ingresamos a Solvetic desde nuestro PC, usando para ello el navegador Google Chrome veremos el siguiente aspecto, completo, de un golpe de ojo vemos todo amplio, zona para iniciar sesión y registrarse:

 

solvetic_pc.jpg

 

Pero si ingresamos desde Google Chrome en un móvil Android, no entra todo el contenido en la pantalla como es lógico, es algo que se tiene que tener en cuenta, no es muy agradable tener que deslizar el dedo para ir viendo las partes de la pantalla (pocos sitios son así hoy en día, por fortuna), a continuación dejo la imagen de cómo se ve Solvetic en el móvil:

 

solvetic_movil.jpg

 

Como vemos se adapta a la pantalla, ahora los menús los tenemos en la parte superior, si pinchamos en la parte izquierda (las 3 barritas) veremos las opciones para ir a los artículos, tutoriales, etc.

 

solvetic_movil_2.jpg

 

Y si pinchamos en el icono de la derecha (aspecto de boton de apagado / encendido) tenemos las opciones para hacer login o registrarnos.

 

solvetic_movil_3.jpg

 

Ahora vamos a ver una forma de lograr que se sirva una página, según el dispositivo que nos visita.

 

 

¿Cómo lograr el resultado?


Existen varias formas de lograr este resultado, hay scripts que se colocan directamente en la aplicación o también contamos con frameworks como Bootstrap, pero también podemos lograr un resultado similar desde Nginx, ya que al reconocer el agente del navegador podemos hacer un rewrite y enviar al usuario a otra parte de la aplicación sin cambiar la URL que él ve.

 

Si quieres conocer Nginx dejamos a continuación un enlace, donde también podrás proceder a su descarga:

 


Para lograr esto debemos primero identificar el agente del navegador, si es alguno de los que queremos que entren en la regla utilizamos un simple condicional y le aplicamos la regla, todo esto lo hacemos en nuestro bloque location.

 

Veamos el siguiente código de ejemplo para lograr esto, puedes ver lo breve que es:

location / { 
    if ($http_user_agent ~* '(iPhone|iPod)') {  	
        rewrite ^.+ http://m.ejemplo.com/$uri;   }
    }
}
Como vemos en el código, identificamos el agente del navegador, si este corresponde con el que hemos designado (en este caso iPhone o iPod) hacemos un rewrite, esto lo podemos hacer tan amplio o especifico como nuestra lógica lo requiera, para el ejemplo es más fácil de entender con una sola condición.

 

Como vemos es bastante fácil identificar el agente del navegador y es aún más sencillo utilizar esto a nuestro favor, como antes hemos mencionado debemos tener una idea clara de lo que queremos hacer para de esta forma poder utilizar las herramientas y sacarle el beneficio deseado.

 

Para concluir el tutorial comentar que usando el diseño responsive lograrás que la apariencia de tu página web se adapte a la pantalla de los dispositivos sin mayor complicación.


¿Te ayudó este Tutorial?


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X