Monday, September 13, 2010

Desktop to Mobile site switching Apache config

Recently i have come across a situation to write Apache config for Desktop to Mobile site switch and vice-versa.

Below are the Constraints,

  1. Lets assume we have two sites, one for Desktop(web version 'www.domain.com') and another for Mobile(mobile version 'mobile.domain.com').
  2. If i view my site from Desktop then Desktop version should appear, similarly if i view the same site from any mobile device then it should automatically redirected to Mobile site.
  3. Important constraint here is, user should be allowed to change their preference from desktop to Mobile version and vice-versa by the link provided in both the sites('Mobile version','Web version'). Based on the preference set by user, proper version should appear when user Re-visits the site.
  4. Moreover, if user is in 'web version' under search page, from here if user clicks 'Mobile version' then in Mobile site same search page with result should appear.
In order to implement the above scenarios, i have searched in Google many times but couldn't get help, so i started writing by my own (as below),

In your Web version site Vhost file:

RewriteCond %{REQUEST_URI} ^/switch_to_mobile
RewriteRule ^/switch_to_mobile$ - [co=version:mobile:.domain.com]
RewriteCond %{HTTP_REFERER} http:\/\/www.domain.com\/(.*)
RewriteRule ^/switch_to_mobile$ http://mobile.domain.com/%1 [R=302,L]

RewriteCond %{HTTP_COOKIE} version=mobile [NC]
RewriteRule ^(.+)$ http://mobile.domain.com$1 [L,R=302]

RewriteCond %{HTTP_USER_AGENT} BlackBerry
RewriteCond %{HTTP_COOKIE} !version=web
RewriteRule ^(.+)$ http://mobile.domain.com/$1 [R=302,L]


In your Mobile version site Vhost file:

RewriteCond %{REQUEST_URI} ^/switch_to_web
RewriteRule ^/switch_to_web$ - [co=version:web:
.domain.com]
RewriteCond %{HTTP_REFERER} http:\/\/mobile.domain.com\/(.*)
RewriteRule ^/change_to_web$ http://www.domain.com/%1 [L,R=302]

RewriteCond %{HTTP_COOKIE} version=web [NC]
RewriteRule ^(.+)$ http://www.domain.com$1 [L,R=302]


                           (or)  Even simpler you may try the below config


Web version:

 RewriteCond %{REQUEST_URI} ^/change_to_mobile
 RewriteCond %{HTTP_REFERER}  http:\/\/www.domain.com\/(.*)
 RewriteRule ^/change_to_mobile$  http://mobile.domain.com/%1 [R=301,L]

 RewriteCond %{HTTP_USER_AGENT} iphone|ipod|alcatel|android|midp|240x320|blackberry|dopod|htc|huwai|lg|midp|nec|netfront|nokia|panasonic|portalmmm|sharp|sie-|sony|sonyericsson|symbian|benq|mda|mot-|motorola|palm|panasonic|philips|sagem|samsung|sanyo|sharp|sda|sgh-|t-mobile|vodafone|xda|pocket\ pc|opera\ mini|windows\ ce [NC]
 RewriteCond %{HTTP_COOKIE} !preference=web [NC]
 RewriteRule ^(.+)$  http://mobile.domain.com$1 [R=302,L]



Mobile version:

RewriteCond %{REQUEST_URI} ^/change_to_web$
RewriteRule ^/change_to_web$ "$0" [co=preference:web:.domain.com]
RewriteCond %{HTTP_REFERER} http://mobile.domain.com/(.*)
RewriteRule ^/change_to_web$  http://www.domain.com/%1 [R=302,L]

Hope above configuration should help you Guys !!!

6 comments:

Ashly said...

Hi,

Thanks for this.

A quick question. If the mobile version and web version is running on separate servers and the cookie is set on the web version for the mobile preference, is that cookie readable from the server where mobile version is running?

thanks,
-ash

vigram karuppiah said...

Ashly,

Cookie is meant for client side storage. So the cookie set on Web version is still readable from Mobile version server if domain is identical.

Thanks,
Vigram K

Razye said...

I'm new to this coding and I want to make my website for desktop as well as mobile.
I got the .htaccess code but it is creating problem.
can you provide me the detect.php and config.php code and index.php which help in directing the directory path.
Regards
razyekhan@gmail.com

vigram karuppiah said...

Razye,

Being a Ruby On Rails developer i am unable to provide you php code. Moreover example provided in this post is nothing to do with your php code, its more of Web server configuration.

Thanks
Vigram K

Jerry Gene said...

Very informative and worthy post. Thanks for the sharing such a precious updates with us.

Lenovo - IdeaPad 15.6" Laptop - 8GB Memory - 1TB Hard Drive - Dusk Black

Lenovo - 15.6" ThinkPad Notebook - 4 GB Memory - 320 GB Hard Drive - Black

vigram karuppiah said...

Jerry,

Thanks for your comment.