[Sin olvidar] Web Forms, como detectar y redireccionar usuarios móviles.

Hola que tal?, en este post quería abordar el tema de Mobile y Web Forms, ya hemos visto las facilidades que existe con ASP.NET MVC , o con MVVM, en donde tenemos vistas que, debido a que controlamos todo el código generado, podemos fácilmente incluir algún framework como jqueyrmobile. Pero no hay que olvidar que existe una gran cantidad de sitios que utiliza y seguirá utilizando WebForms, de manera que es siempre necesario revisar el tema de como agregar la posibilidad de detectar los dispositivos móviles con esta tecnología y re direccionar a una vista consistente con un navegador móvil.

Una de las opciones que tenemos en tener un crear una Master Page específica, en donde podemos ocupar los mismos formularios, pero separamos en dos MasterPages, una con la vista normal y la otra con la versión móvil, esto nos permite tener estilos CSS y HTML  de nivel superior,(entiéndase doctype y metas específicos para móviles) , todo esto nos evita duplicar la lógica ya desarrollada

protected void Page_PreInit(object sender, EventArgs e)
{
      if (Request.Browser.IsMobileDevice)
             MasterPageFile = "~/Mobile.Master";
}

Ahora bien, el enfoque anterior, si bien es apropiado para ciertos escenarios, puede no ser adecuado cuando dicha lógica o flujo de trabajo de los formularios no se ajusta a una vista móvil, por ejemplo un carro de compras. En este caso vamos a requerir la creación de un WebForm independiente y exclusivo ara la vista móvil. Lo más usual es que creemos  una carpeta con el nombre “Mobilel” para dejar ahí todas las páginas para móviles ahí. Podemos crear un “segundo” sitio completo, con master pages, css, paginas, etc. Además como se supone una lógica simplificada, no es necesario replicar todo el sitio de escritorio y luego modificarlo, solo lo necesario y pueden compartir la misma lógica de negocio que las paginas de escritorio . Como consejo en esta etapa, te recomiendo tener una capa de negocios consistente ente ambas vistas, además de la utilización de WebServices que puedes acceder mediante jquery en vistas totalmente HTML, mucho más liviano que ocupar webcontrols dentro de un formulario móvil.

Generalmente es conveniente hacer la redirección a la vista móvil solo en la primera solicitud de su sesión de navegación, por las siguientes razones:

  • Facilidad para permitir a los usuarios acceder a la vista normal o de escritorio si así lo desean. Típicamente colocamos un link indicando “Versión de Escritorio”. En este caso, no habría redirección y consulta sobre si es un dispositivo móvil por cada postback.
  • Evita el riesgo de interferir con las solicitudes dinámicas de recursos compartidos entre las dos vistas(móvil y escritorio)

Para lo anterior, lo que debemos hacer, en el archivo Global.asax, es implementar en el método Session_start la siguiente lógica:

void Session_Start(object sender, EventArgs e)
       {
          HttpRequest httpRequest = HttpContext.Current.Request;
           if (httpRequest.Browser.IsMobileDevice)
           {
               string path = httpRequest.Url.PathAndQuery;
               bool isOnMobilePage = path.StartsWith("/Mobile/",
                                                     StringComparison.OrdinalIgnoreCase);
               if (!isOnMobilePage)
               {
                   string redirectTo = "~/Mobile/";
                   HttpContext.Current.Response.Redirect(redirectTo);
               }
           }
       }

Como puedes observar, lo primero que se hace es comprobar la información del httpRequest, de manera de verificar si el usuario  está navegando desde un móvil, luego mediante el path, comprobamos si estamos navegando dentro de nuestra sitio móvil, en el caso de que se cumpla de que estamos desde un móvil, pero no lo estamos en la vista móvil, lo re direccionamos a la vista adecuada.

Otro punto importante es el tema de cache de salida, ya que es posible que un usuario que se hubiese encontrado navegando en una pagina “X Escritorio” cause que se almacene cache para esa página, luego un usuario móvil visita la misma página, va a recibir el cache de salida de la página “X Escritorio” en su vista “X Movil”. Para evitar este problema, le podemos indicar a ASP.NET que varíe el cache de salida según si el usuario es móvil o de escritorio. Para esto agregamos en la declaraciones del webform:

<%@ OutputCache VaryByParam="*" Duration="60" VaryByCustom="isMobileDevice" %>

Con esto estamos indicando que vamos a indicar de manera customizada la variación del refresco del cache de salida en memoria, ahora lo que debemos hacer es agregar el siguiente método en el global.asax:

public override string GetVaryByCustomString(HttpContext context, string custom)
{

  if (string.Equals(custom, "isMobileDevice", 
                                            StringComparison.OrdinalIgnoreCase)) 
       return context.Request.Browser.IsMobileDevice.ToString();

return base.GetVaryByCustomString(context, custom);

}

Eso va a asegurar a los visitantes de nuestro sitio que no van a recibir una salida de cache generada por un usuario de escritorio.

Eso!, ven, no hay que olvidarse de WebForms, aun son muchos los desarrolladores que están con esta tecnología, recordemos también que ahora existe un solo ASP.NET, y tu elijes que condimentos tener en tu sitios.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *