Mobile Device Detection and Redirection in Node+Express

One of the challenges of writing a mobile web site is what to do if a user hits the site from a desktop? Of course, some will say that you should simply make the site responsive, able to look good regardless of the browse it is displayed on. But what if the site is a game? I know all of the responsive design true believers will be upset with my solution, but so what, I like it. I “iframe” the mobile site into a 320 x 480 window on the desktop page. This brings up more challenges, like how detect a mobile device and how to route to the correct page?

The first challenge has already been solved by the excellent web site: http://detectmobilebrowsers.com/. They have created a rather long regular expressions which detects a mobile browser by its user agent. The answer to the second challenge comes from the Express.js middleware which makes Node.js a great framework. 

Express allows the developer to inject middleware into the route handler. For our root route we will call the checkForMobile method. If we detect a mobile browser, we will redirect to our mobile route. On all other routes, we won’t bother checking for mobile. If a desktop user wishes to navigate directly to the mobile page, we will let them.

Please check out the code sample below to see how it is done. Or if your are interested in the complete, and still in progress, mobile game check it out at: https://github.com/Rockncoder/planegame. To see the live and very much in progress code, go to: http://planegame.herokuapp.com/

I will be talking about the complete game at So Cal Code Camp at USC, the weekend of November 9th & 10th. If you are in the area, be sure to attend. It is a free event: http://www.socalcodecamp.com/


https://gist.github.com/Rockncoder/7295835.js



Advertisements

7 thoughts on “Mobile Device Detection and Redirection in Node+Express

  1. Hi, Troy.

    I usually follow your post. In this case what about to make the inverse process, from a jquery mobile project (for instance) to detect and ask to continue or going to the main site.

    Greetings

    Like

  2. Hi,

    I'm working for the Web Compatibility Team at Mozilla, aka dealing partly with UA sniffing 😉 and trying to fix things for users.

    One of the issues with the hard coded version of mobile detection as it is in the code is that it is future fail. Any new browsers with the right capabilities but not the UA string fitting the requirements of the regex will fail.

    When recommending UA detection it is good to warn about the risks too. Basically it is a high maintenance code choice 🙂 It also means that you have to think about your code with a fallback mechanism which is not only if not working go to desktop, more in the sense, if not working what do you want? Do you want to have the mobile version of the desktop version. It's an additional step but less frustration for the user in the end.

    Another regular issue is blog post such as this one with legacy code 🙂 People end up copying stuff without going to the source of the UA detection framework. For example, in your code there is “mobile.+firefox” to cater for Firefox OS. It was recently added because Mike Taylor (Moz Web Compatibility team) detected the missing culprit. But what will be the next mobile device which is not in that code.

    This is part of the reality kicking in, specifically in a business context, when the client has paid for a production release, but doesn't want to be billed each time there's a new browser/device which appears on the market. So legacy code stays online and people don't understand why it fails. First reaction is often blaming the browser. 🙂

    Hope it helps.

    Like

  3. Hi Thanh,

    The code works fine. I believe you may not have understood how to use it. It is only for Node.js based sites. Your site appears to use Google's Blogger. Luckily Blogger does its own detection of mobile devices, so you don't need my code.

    Take care,

    Troy

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s