Background and the problem

Often we need to design an alternative homepage for visitors browsing from mobile device. This situation arises when the desktop site has too much information, carousel, advertisements and you intent your mobile site to serve minimal yet most important pieces. Responsive designs often help in this kind of situation where you place both mobile and desktop content on the same page and responsive UI framework determines which portion (Desktop or mobile) to show depending on viewport size. In many situations this solution is not ideal as desktop sites are often heavy because various UI libraries and images it is loads with it. Also, you need to consider limitations mobile devices have due to limited hardware resources. So, if all static resources, CSS/JS mobile pages are loading although those things are not needed by the page itself, then you surely have some room for improvement.


In real world web applications we see a lot of sites specially design few pages dedicated for mobile devices as its not important or infeasible to design a complete separate site handheld devices.


 And if you are using server side technology to detect mobile device and also using reverse proxy caching technology like varnish there is a problem. By nature, varnish receives the request from browser ahead of Apache. It performs a lookup in its internal cache table, if the content is available in cache, it serves the content and request is not forwarded to Apache server. But you are using server side script to detect mobile device and redirect to appropriate mobile version of that page. So, your user agent detection will break.



However, it is possible to detect mobile device in varnish.  You need to write some VCL (Varnish configuration language) code in varnish configuration file to detect the device and take appropriate action.



In varnish configuration file  vcl_recv procedure handles incoming requests, so, you need to write your browser agent detection code in it. In the sample code, we’ll detect device and handle mobile pages through varnish error handler.



sub vcl_recv { # mobile redirects - we error the request into vcl_error for the 302 redirect if ( req.http.user-agent ~ "(.*Android.*|.*Blackberry.*|.*BlackBerry.* |.*Blazer.*|.*Ericsson.*|.*htc.*|.*Huawei.*|.*iPhone.*|.*iPod.*|.*MobilePhone.*| .*Motorola.*|.*nokia.*|.*Novarra.*|.*O2.*|.*Palm.*|.*Samsung.*|.*Sanyo.*| .*Smartphone.*|.*SonyEricsson.*|.*Symbian.*| .*Toshiba.*|.*Treo.*|.*vodafone.*| .*Xda.*|^Alcatel.*|^Amoi.*|^ASUS.*|^Audiovox.*|^AU-MIC.*|^BenQ.*|^Bird.*|^CDM.*| ^DoCoMo.*|^dopod.*|^Fly.*|^Haier.*|^HP.*iPAQ.*|^i-mobile.*|^KDDI.*|^KONKA.*| ^KWC.*|^Lenovo.*|^LG.*|^NEWGEN.*|^Panasonic.*|^PANTECH.*|^PG.*|^Philips.*| ^portalmmm.*|^PPC.*|^PT.*|^Qtek.*|^Sagem.*|^SCH.*|^SEC.*|^Sendo.*| ^SGH.*|^Sharp.*|^SIE.*|^SoftBank.*|^SPH.*|^UTS.*|^Vertu.*|.*Opera.Mobi.*| .*Windows.CE.*|^ZTE.*)" && req.url == "/") { error 288 "mobile redirect"; }


In above code, varnish raises an error when requests for home page come from mobile device and let the error handler take appropriate action.


Now what action Varnish needs to take will be defined in vcl_error, the error handler procedure. In the code below we redirect to alternative mobile home page when visitors request for home page from mobile device:



sub vcl_error { if (obj.status == 288) {         set obj.http.Location = "/mobile-home"  set obj.status = 302;         return(deliver);     } }




Add new comment