ASP.Net Http module for mobile device browser redirection

comments

With all the advances and improvements in the mobile space of late, there is even more need to have a mobile presence/version of your website. Today I'm going to take a look at a quick and easy way to make sure that mobile browsers are always looking at the correct version of your site, and we’ll do it using a nifty little Http Module.

mobile-browser

UPDATE: Now with an example project below!!!!

Depending on how you’ve set up your mobile site you may be using a different address space like /mobile or a sub domain like m.yourdomain.com to host it. This means that you might have to go to a lot of trouble to make sure your users know the new address, so they can access your site on a mobile device. Apart from the waste of time and money spent doing this, i only have one statement: This is not intuitive. So what we want to do i redirect all of our users that are using a mobile device such as an iPhone, Blackberry, Android phone or Windows Mobile out there, to our new mobile site.

Hi there!

This article is now old and has-been as it’s based on an open source project – The Mobile Device Browser File, that is no longer active.

Check out my updated post covering this very topic with a 2011 spin here.

Who is your daddy and what does he do?

Luckily there are two nifty features in ASP.Net that make doing this a hell of a lot easier.

  1. Browser file definition support
  2. Site wide Http modules

Add to this a really cool open source project on CodePlex called “Mobile Device Browser File” @ http://mdbf.codeplex.com/ and you have a powerful combination.

The project mentioned above not only contains a list of mobile browsers that covers a hell of a lot of mobile space, but also adds the ability to check a database of 67 capabilities of all these devices. This can be really handy when trying to figure out if you can send audio or ajax requests with the current users mobile browser. Another huge bonus with having these capabilities is being able to recognise if your device has a touch screen as this allows you to specially cater to these devices by maybe making all your form fields and buttons bigger and easier to select/press.

To add support to your site for the latest browser definitions file:

  1. Unzip the latest release from http://mdbf.codeplex.com/ 
  2. Create a new directory in your website called /App_Browsers/Devices
  3. Copy the mobile.browser file from the above zip file into this directory

Our Http module

Next we need to capture all incoming requests and check to see if the user is using a mobile browser. If this is the case we want to redirect them to our new oober cool mobile site.

This is where our Http Module comes in. Http Modules are ASP.Net’s support for them come in really handy when you want to do anything to all requests across your site. If you haven’t heard anything about what I'm talking about, you can do some back reading @ msdn here.

 

So create a new class in your website (or class library, or wherever you want!) and copy the code below into it:

namespace Ninja.Website
{
    public class MobileRedirectHandler : IHttpModule
    {
        private string MobileSiteURL= "/mobile";

        public void Init(HttpApplication app)
        {
            app.BeginRequest += 
                new EventHandler(this.OnBeginRequest);
        }

        public void Dispose() { }

        public void OnBeginRequest(object o, EventArgs args)
        {
            HttpContext context = HttpContext.Current;

            if (context.Request.Browser.IsMobileDevice &&
                context.Request.RawUrl.LastIndexOf(MobileSiteURL) < 0)
                context.Response.Redirect(MobileSiteURL, true);
        }
    }
}

What are we doing here?

  • Grabbing the request
  • Check if its from a mobile device and if the requested URL contains “/mobile”
  • If it is a mobile device and they aren’t requesting our mobile site we redirect to “/mobile”

You’ll see that the logic is quite simple and easy to modify for a number of scenarios depending on what you are looking to do with the request and where your mobile site sits.

Additionally you may have certain scenarios where you may want to allow the request through, such as allowing certain files to still be accessible even if a mobile device is viewing it (ie. You have a wild card mapping in your site to the ASPNet dll and you want images/CSS to still be accessible)

Web.config changes

Now we need to tell ASP.net all about the magical little gem above, so we add a reference to it in our web.config. This needs to be added to the httpModules section. If you are using IIS 7 this also needs to be added to the <system.webServer>/<modules> section of your config file.

Note: In my case i reference the library Ninja.WebSite this will be different for you depending on where you have created your modules class above.

IIS 6:

<httpModules>
    <add name="MobileHandler"   
    type="Ninja.Website.MobileRedirectHandler, Ninja.WebSite"/>
</httpModules>

Or for IIS 7:

<system.webServer>
    <modules>
        <add name="MobileHandler"
        type="Ninja.Website.MobileRedirectHandler, Ninja.WebSite" 
        preCondition="managedHandler” />
    </modules>
</system.webServer>

Testing

Apart from testing this physically on your mobile device of choice you can fake it by altering what your browser reports to the server. This makes it ALOT easier to test locally on your development machine. There are several little modules/extensions/addons depending on your browser that are capable of doing this but my preferences are:

Firefox: User-agent switcher

https://addons.mozilla.org/en-US/firefox/addon/59

Chrome: Chromeleon User-Agent Spoofer

https://chrome.google.com/extensions/detail/aafciojnlamllgpkpdkbamkfgbofhgcj

You then add your device of choices user-agent to your tool of choice once installed and you should be able to test that your module is working correctly.

As you can see whether it be attempting to corner the emerging iPhone/iPad market or catering to older Blackberry’s and Windows mobile devices, making sure they get to your mobile site in one piece is easy.

Example project

I have made this into a nice little example project just for you. Make sure you check out the web.config to see how we include the project:

Download it here