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 !!!

9 comments:

ashtrick 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 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 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

Unknown 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 said...

Jerry,

Thanks for your comment.

cynthiawilliams said...

I really enjoyed while reading your article and it is good to know the latest updates. Do post more.
DevOps course in Chennai
Best DevOps Training in Chennai
AWS Training in Chennai
AWS Certification in Chennai
RPA Training in Chennai
Robotics Process Automation Training in Chennai
DevOps Training in Anna Nagar
DevOps Training in Chennai

jenifer irene said...

This is really impressive post, I am inspired with your post, do post more blogs like this, I am waiting for your blogs.
aviation training in Chennai
air hostess academy in Chennai
Airport Management Training in Chennai
airport ground staff training courses in Chennai
Aviation Academy in Chennai
air hostess training in Chennai
airport management courses in Chennai
ground staff training in Chennai

Kerrthika K said...

Nice post and more informative,thanks for sharing.
film institute in chennai
film academy in chennai
acting institute in chennai
best film school in chennai
film studies in chennai
film making courses in chennai
direction course in chennai