Identifying the iPhone Safari User Agent

Identifying the User Agent

When you are trying to identify the capabilities of the browser requesting your Web site or application, you generally want to avoid detecting the user agent and use object detection instead. However, if you are developing an application designed exclusively for iPhone or need to guarantee the browser being used, user agent detection is a valid option. Therefore, this chapter assumes you are creating a Safari-specific application.

 

The Safari user agent string for iPhone closely resembles the user agent for Safari on other platforms. However, it contains an iPhone platform name and the mobile version number. Depending on the version of Mobile Safari, it will look something like this:

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like

Gecko) Version/3.0 Mobile/1A543a Safari/419.3

Here’s a breakdown of the various components of the user agent:

  • The platform string: (iPhone; U; CPU like Mac OS X; en). Notice the “like Mac OS X” line, which reveals some of the underpinnings of the iPhone.

  • The WebKit engine build number: AppleWebKit/420+. This Safari version number is provided on all platforms (including Mac and Windows).

  • The marketing version: (Version/3.0). This Safari version number is provided on all platforms (including Mac and Windows).

  • OS X build number: Mobile/1A543a.

  • Safari build number: Safari/419.3.

The iPod touch user agent is similar, but it is distinct from iPod as the platform:

Mozila/5.0 (iPod; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like

Gecko) Version/3.0 Mobile/3A101a Safari/419.3

The version numbers will change, obviously, when Apple updates Safari, but the string structure will stay the same.

To test whether the device is an iPhone/iPod touch, you need to perform a string search on iPhone and iPod. The following function returns true if the user agent is either an iPhone or iPod touch:

function isAppleMobile() {

  result ((navigator.platform.indexOf(“iPhone”) != -1) ||

          (navigator.userAgent.indexOf(“iPod”) != -1))

}

Be sure not to test for the string Mobile within the user agent, because a non-Apple mobile device (such as Nokia) might be based on the WebKit-based browser.

If you need to do anything beyond basic user agent detection and test for specific devices or browser versions, however, consider using WebKit’s own user agent detection script available for download at trac.webkit.org/projects/webkit/wiki/DetectingWebKit. By linking WebKitDetect.js to your page, you can test for specific devices (iPhone and iPod touch) as well as software versions. Here’s a sample detection script:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

         “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=“http://www.w3.org/1999/xhtml”>

<head>

<title>User Agent Detection via WebKit Script</title>

<meta name=“viewport” content=“width=320; initial-scale=1.0;

maximum-scale=1.0; user-scalable=0;”>

<script type=“application/x-javascript” src=“WebKitDetect.js”></script>

</head>

<body>

<p id=“log”></p>

</body>

<script type=“application/x-javascript”>

function addTextNode(str) {

  var t = document.createTextNode(str);

  var p = document.getElementById(“log”);

  p.appendChild(t);

}

if ( WebKitDetect.isMobile() ) {

  var device = WebKitDetect.mobileDevice();

  // String found in Settings/General/About/Version

  var minSupport = WebKitDetect.mobileVersionIsAtLeast(“1C28”);

  switch( device ) {

    case ‘iPhone’:

      if ( minSupport ) {

        addTextNode(‘If this were a real app, I launch its URL right now.’);

      }

      else {

        addTextNode(‘Please upgrade your iPhone to the latest update before

running this application.’);

      }

      break;

    case ‘iPod’:

      addTextNode(‘If this were a real app, I would launch its iPod touch

      version.’);

      break;

    default:

      addTextNode( ‘This mobile device is not supported by this application.

Go to your nearest Apple store and get an iPhone.’);

      break;

  }

}

else {

  addTextNode( ‘Desktop computers are so 1990s. Go to your nearest Apple store

  and get an iPhone.’ );

}

</script>

</html>

With the WebKitDetect.js script included, the WebKitDetect object is accessible. Begin by calling its isMobile() method to determine whether the device is a mobile one. Next, check to ensure that the mobile version is the latest release, and save that result in the minSupport variable. The switch statement then evaluates the mobile device. If it is an iPhone, switch checks to see if minSupport is true. If so, a real application would begin here. If minSupport is false, the user is notified to update his or her iPhone to the latest software version. The remaining two case statements evaluate for an iPod touch or an unknown mobile device. The final else statement is called if the device is not a mobile computer. 

This article is excerpted from chapter 2 "Programming the Canvas" of the book "Safari and WebKit Development for iPhone OS 3.0" by Richard Wagner (ISBN: 978-0-470-54966-7, Wrox, 2009, Copyright Wiley Publishing Inc.)

Tags:

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *