I've come to an important stage of the development of an iPhone-optimized version of my website, RinkAtlas. I've decided to redirect all visitors to the site who are using an iPhone or an iPod touch to the iPhone-optimized version of the site. The technique I'm using for this is JavaScript-based user agent detection.

I realize that Apple has frowned on this technique at times, but big sites such as Facebook and ESPN do it. So why wouldn't I do it for my ice rink directions Google Maps mashup?

I started off reading Using the Safari on iPhone User Agent String in the Apple Web Apps Dev Center. (You'll need to have some form of subscription to Apple Developer Connection to read this document or anything else in the Web Apps Dev Center.) This document referred me to Detecting WebKit with JavaScript which gives two examples of agent detection in JavaScript.

I chose to use the library called webkit_xl.zip which attempts to parse the agent string and differentiate between many different shipping webkit-based applications and application versions.

The code in webkit_xl.zip did not work for me out-of-the-box because the file called webkit_xl.js has not been updated to reflect Mobile Safari user agent string format changes. The current format of the iPhone user agent string is:

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/XX (KHTML, like Gecko) Version/ZZ Mobile/WW Safari/YY

... as indicated in the Safari Developer FAQ.

The user agent detection code in webkit_xl.js at this writing does not handle the "Version/ZZ Mobile/WW Safari/YY" portion correctly. I debugged and fixed the code locally for RinkAtlas, and I will submit a path to the author if I have time.

Once I tweaked the code in webkit_xl.js, I set about integrating it into my RinkAtlas application. What I wanted was to have add the user agent detection code to the page that is generated each time a Google Map rendered for a visitor to the site. This way, if an iPhone or an iPod touch hit the page, the browser would redirect itself to http://www.rinkatlas.com/iphone/.

RinkAtlas is currently a PHP application written with an MVC design pattern using the Smarty templating environment and GoogleMapsAPI. So, I needed to add the user agent detection code to the Smarty template that is used to construct the site's home page. This is the code that needed to be added:

<script type="text/javascript" src="js/webkit_version_xl.js"></script>

...

{literal}
<script language="JavaScript" type="text/javascript">
<!--
var version = get_webkit_version();
var iPhone_regex = /iPhone|iPod/;
var result = version['browser'].search(iPhone_regex);
if (result != -1) {
window.location = "http://www.rinkatlas.com/iphone/";
}
// -->
</script>
{/literal}

I deployed this code on to my production site and it works!

The biggest issue I see is the performance of the RinkAtlas home page on my first-generation iPhone on AT&T's EDGE network. I probably need to compress the JavaScript that is getting loaded before the JavaScript snippet listed above is executed.

This is not the first web application that I've written that needs JavaScript compression for performance reasons, but it's the first of my personal projects that needs it. Maybe there's a better, faster way to redirect iPhones and iPod touches to the iPhone-optimized version of the site. If there is, I'll iterate my way there in the near future.