SCENARIO :
The user needs to be redirected to the mobile version of the site (home page) if it’s trying to access the site from a mobile device.
SOLUTION:
UPDATE 25/07/2011 : Version 0.9.5 released with support for “tablet_url”, “keep_path” and “keep_query” properties. Ipad and other tablet devices have been excluded from the list of mobile devices by default. You can use “tablet_redirection” and “tablet_url” parameters for tablets.
To solve this problem, the best approach is implementing something server-side, and I find a good approach using the WURFL file to check the capabilities and features of mobile devices. Read here to know more about WURFL.
Sometimes, a server-side solution can become difficult to implement especially if we have a CDN or reverse proxy (sitting in front of our Web Server) caching our pages.
Here JavaScript comes to the rescue and I wrote a script that makes the redirection happen called “redirection_mobile.js“.
You can find the source here on Github.
The first thing to keep in mind is that the function implemented checks the User-Agent string from the Navigator object and from there it decides if the redirection needs to happen.
In some cases the user wants to access to the Desktop version of the site from a mobile device (sometimes the desktop version has more functionality). The script handles this situation as well, it checks if the previous page hit was one from the mobile site (we can suppose the user clicked on a link such “Go to full site“) or if there is a specific parameter in the querystring of the URL. In those cases the redirection won’t occur. To keep the user in the desktop version for the whole session, sessionStorage object has been used, specifically an item will be stored to distinguish if we’re browsing through the desktop site.
There is a fallback for old browsers that don’t support sessionStorage, and a cookie will be used. The cookie that makes the access to the desktop version from a mobile device possible will expiry in one hour or you configure the expiry time.
iPhone, iPad, iPod, Android phones support completely sessionStorage, there are still some versions of Blackberry that using IE don’t and so we still need the “cookie” fallback.
The function accepts an argument which is a configuration object with few properties:
- mobile_prefix : prefix appended to the hostname, such as “m” to redirect to “m.domain.com”. “m” is the default value if the property is not specified.
- mobile_url : mobile url to use for the redirection (without the protocol), such as “whatever.com”/example to redirect to “whatever.com/example”. If “mobile_prefix” is existing as well, “mobile_prefix” will be ignored. Empty string is the default value.
- mobile_scheme : url scheme (http/https) of the mobile site domain, such as “https” to redirect to “https://m.domain.com”. The protocol of the current page is the default value.
- noredirection_param – up to version 0.6 param was used: parameter to pass in the querystring of the URL to avoid the redirection (the value must be equal to “true”). Default value is “noredirection”. Eg: http://domain.com?noredirection=true. It’s also the name of the item in the localStorage (or cookie name) used to avoid mobile redirection. Prior version 0.9.5 this parameter was called “redirection_paramName”, but I renamed it to make the meaning clearer.
- cookie_hours : number of hours the cookie needs to exist after redirection to desktop site. “1″ is the default value.
- tablet_redirection : boolean value that enables/disables(default) the redirection for tablet such as iPad, Samsung Galaxy Tab, Kindle or Motorola Xoom. – Default:false. The value needs to be a string (so wrapped in double or single quotes). If ‘tablet_url’ parameter not specified, the user will be redirected to the same URL as for mobile devices.
- tablet_url : url to use for the redirection in case the user is using a tablet to access the site. Default value is “”
- keep_path : boolean to determine if the destination url needs to keep the path from the original url. Default value is ‘false’
- keep_query : boolean to determine if the destination url needs to keep the querystring from the original url. Default value is ‘false’
- beforeredirection_callback : if specified, callback launched before the redirection happens. If a falsy value is returned from the callback the redirection doesn’t happen.
To use “redirection_mobile” function, you need to load your script in the HTML of the “desktop” pages and call it as SA.redirection_mobile(config). See the code below:
For instance, in this case, accessing from a mobile device to http://www.domain.com, you’ll be redirected to “http://mobile.domain.com“.
Considering the previous code, from version 0.6, if you hit a page such as “http://domain.com/?noredirection=true” the redirection won’t happen. For all the browser session, if sessionStorage is supported by the browser, the redirection won’t occur. If sessionStorage (HTML5) is not supported, a cookie “noredirection=true” will be stored for 2 hours and it will block the redirection to the mobile site.
If sessionStorage (HTML5) is not supported, a cookie named “noredirection” will be stored for 2 hours and it will block the redirection to the mobile site.
The script from version 0.5 allows you to redirect the user to whatever url. Thus if you need to redirect the user to “https://domain2.com/mobile” now you can invoke the function like this:
Alternatively you can use “redirection_mobile_self.js”, that is it’s an anonyimous self-executing function and it uses it uses the default values for the different properties:
- “mobile_prefix” : “m”
- “redirection_paramName” : “mobile_redirect”
- “cookie_hours” : 1
- “mobile_url” : “”
- “mobile_scheme” : protocol of the current page
- “tablet_redirection” : false
- “beforeredirection_callback” : n/a
It doesn’t need any configuration or any invocation, so you just need to drop it on your webserver and call the script from the HTML of the “desktop” pages . See code below:
in this case, accessing from a mobile device to http://www.domain.com, you’ll be redirected to “http://m.domain.com“.
To redirect to a desktop/standard version of the site from a mobile device, you may need to embed a link in your mobile pages such as
and the script included in the desktop page will do the rest.
I also created “redirection_mobile_testable.js” that is just a copy from “redirection_mobile.js”, but it’s using few arguments such as “document”, “window”, “navigator” for testing purpose. Test cases have been written, using QUnit, to test this script and they mock “document”, “window” and “navigator” in a rudimentary way.
The scripts have their minified versions (used YUI compressor).
If you want to test the script on different devises within your desktop browser, you can use a plugin for Firefox called User Agent Switcher, that you can download here.
Feel free to fork the project and improve it if necessary.
..and feel free to make a donation from this page
UPDATE 20/12/2010 : Added support for more devices and fixed a critical issue on IE
UPDATE 05/01/2011 : Version 0.5 released with support for “mobile_url” and “mobile_scheme” properties
UPDATE 02/04/2011 : Version 0.8 released with support for “ipad_redirection” and
“beforeredirection_callback” properties
You can support me clicking the DONATE button you can find on my site http://www.sebastianoarmelibattana.com/projects/js-redirection
The user needs to be redirected to the mobile version of the site (home page) if it’s trying to access the site from a mobile device.
SOLUTION:
UPDATE 25/07/2011 : Version 0.9.5 released with support for “tablet_url”, “keep_path” and “keep_query” properties. Ipad and other tablet devices have been excluded from the list of mobile devices by default. You can use “tablet_redirection” and “tablet_url” parameters for tablets.
To solve this problem, the best approach is implementing something server-side, and I find a good approach using the WURFL file to check the capabilities and features of mobile devices. Read here to know more about WURFL.
Sometimes, a server-side solution can become difficult to implement especially if we have a CDN or reverse proxy (sitting in front of our Web Server) caching our pages.
Here JavaScript comes to the rescue and I wrote a script that makes the redirection happen called “redirection_mobile.js“.
You can find the source here on Github.
The first thing to keep in mind is that the function implemented checks the User-Agent string from the Navigator object and from there it decides if the redirection needs to happen.
In some cases the user wants to access to the Desktop version of the site from a mobile device (sometimes the desktop version has more functionality). The script handles this situation as well, it checks if the previous page hit was one from the mobile site (we can suppose the user clicked on a link such “Go to full site“) or if there is a specific parameter in the querystring of the URL. In those cases the redirection won’t occur. To keep the user in the desktop version for the whole session, sessionStorage object has been used, specifically an item will be stored to distinguish if we’re browsing through the desktop site.
There is a fallback for old browsers that don’t support sessionStorage, and a cookie will be used. The cookie that makes the access to the desktop version from a mobile device possible will expiry in one hour or you configure the expiry time.
iPhone, iPad, iPod, Android phones support completely sessionStorage, there are still some versions of Blackberry that using IE don’t and so we still need the “cookie” fallback.
The function accepts an argument which is a configuration object with few properties:
- mobile_prefix : prefix appended to the hostname, such as “m” to redirect to “m.domain.com”. “m” is the default value if the property is not specified.
- mobile_url : mobile url to use for the redirection (without the protocol), such as “whatever.com”/example to redirect to “whatever.com/example”. If “mobile_prefix” is existing as well, “mobile_prefix” will be ignored. Empty string is the default value.
- mobile_scheme : url scheme (http/https) of the mobile site domain, such as “https” to redirect to “https://m.domain.com”. The protocol of the current page is the default value.
- noredirection_param – up to version 0.6 param was used: parameter to pass in the querystring of the URL to avoid the redirection (the value must be equal to “true”). Default value is “noredirection”. Eg: http://domain.com?noredirection=true. It’s also the name of the item in the localStorage (or cookie name) used to avoid mobile redirection. Prior version 0.9.5 this parameter was called “redirection_paramName”, but I renamed it to make the meaning clearer.
- cookie_hours : number of hours the cookie needs to exist after redirection to desktop site. “1″ is the default value.
- tablet_redirection : boolean value that enables/disables(default) the redirection for tablet such as iPad, Samsung Galaxy Tab, Kindle or Motorola Xoom. – Default:false. The value needs to be a string (so wrapped in double or single quotes). If ‘tablet_url’ parameter not specified, the user will be redirected to the same URL as for mobile devices.
- tablet_url : url to use for the redirection in case the user is using a tablet to access the site. Default value is “”
- keep_path : boolean to determine if the destination url needs to keep the path from the original url. Default value is ‘false’
- keep_query : boolean to determine if the destination url needs to keep the querystring from the original url. Default value is ‘false’
- beforeredirection_callback : if specified, callback launched before the redirection happens. If a falsy value is returned from the callback the redirection doesn’t happen.
To use “redirection_mobile” function, you need to load your script in the HTML of the “desktop” pages and call it as SA.redirection_mobile(config). See the code below:
<!doctype html>
<html>
<head>
<title></title>
<script type="text/javascript" src="/js/redirection_mobile.min.js"/>
<script type="text/javascript">
SA.redirection_mobile ({noredirection_param:"noredirection", mobile_prefix : "mobile", cookie_hours : "2" });
</script>
For instance, in this case, accessing from a mobile device to http://www.domain.com, you’ll be redirected to “http://mobile.domain.com“.
Considering the previous code, from version 0.6, if you hit a page such as “http://domain.com/?noredirection=true” the redirection won’t happen. For all the browser session, if sessionStorage is supported by the browser, the redirection won’t occur. If sessionStorage (HTML5) is not supported, a cookie “noredirection=true” will be stored for 2 hours and it will block the redirection to the mobile site.
If sessionStorage (HTML5) is not supported, a cookie named “noredirection” will be stored for 2 hours and it will block the redirection to the mobile site.
The script from version 0.5 allows you to redirect the user to whatever url. Thus if you need to redirect the user to “https://domain2.com/mobile” now you can invoke the function like this:
<script type="text/javascript">
SA.redirection_mobile ({mobile_scheme:"https", mobile_url : "domain2.com/mobile"});
</script>
Alternatively you can use “redirection_mobile_self.js”, that is it’s an anonyimous self-executing function and it uses it uses the default values for the different properties:
- “mobile_prefix” : “m”
- “redirection_paramName” : “mobile_redirect”
- “cookie_hours” : 1
- “mobile_url” : “”
- “mobile_scheme” : protocol of the current page
- “tablet_redirection” : false
- “beforeredirection_callback” : n/a
It doesn’t need any configuration or any invocation, so you just need to drop it on your webserver and call the script from the HTML of the “desktop” pages . See code below:
<!doctype html>
<html>
<head>
<title></title>
<script type="text/javascript" src="/js/redirection_mobile_self.min.js"/>
in this case, accessing from a mobile device to http://www.domain.com, you’ll be redirected to “http://m.domain.com“.
To redirect to a desktop/standard version of the site from a mobile device, you may need to embed a link in your mobile pages such as
<a href="http://www.domain.com">Go to main site</a>
and the script included in the desktop page will do the rest.
I also created “redirection_mobile_testable.js” that is just a copy from “redirection_mobile.js”, but it’s using few arguments such as “document”, “window”, “navigator” for testing purpose. Test cases have been written, using QUnit, to test this script and they mock “document”, “window” and “navigator” in a rudimentary way.
The scripts have their minified versions (used YUI compressor).
If you want to test the script on different devises within your desktop browser, you can use a plugin for Firefox called User Agent Switcher, that you can download here.
Feel free to fork the project and improve it if necessary.
..and feel free to make a donation from this page
UPDATE 20/12/2010 : Added support for more devices and fixed a critical issue on IE
UPDATE 05/01/2011 : Version 0.5 released with support for “mobile_url” and “mobile_scheme” properties
UPDATE 02/04/2011 : Version 0.8 released with support for “ipad_redirection” and
“beforeredirection_callback” properties
You can support me clicking the DONATE button you can find on my site http://www.sebastianoarmelibattana.com/projects/js-redirection
0 comments:
Post a Comment