Mobile browser detection and optimization in CakePHP Made Simple

Here is a helpful guide I found while learning to work with JQuery mobile and CakePHP together to create a mobile version of one of my websites.

Hope the line below make sense to you, if not feel free to ask questions in your comments. Here we go …

I needed to do two things:

Detect webkit-based mobile browsers

Automatically serve those browsers a mobile optimized page if one was available for the requested action.

Here’s how I did it, and how you might, too.

Step 1: Update Cake’s browser detection to include Android devices

Cake’s RequestHandler component includes a nifty method for detecting mobile browsers — $this->RequestHandler->isMobile() — but the default list of devices detected by Cake 1.2 is a bit dated.

Fortunately, it’s easy to update. The default list of device names is found in the RequestHandler component’s core file, cake/libs/controller/components/request_handler.php:

if (!defined(‘REQUEST_MOBILE_UA’)) {

define(‘REQUEST_MOBILE_UA’, ‘(iPhone|MIDP|AvantGo|BlackBerry|J2ME|Opera Mini|DoCoMo|NetFront|Nokia|PalmOS|PalmSource|portalmmm|Plucker|ReqwirelessWeb|SonyEricsson|Symbian|UP\.Browser|Windows CE|Xiino)’);

}

Update this by copying it to your core configuration file — /app/config/core.php — and adding the device names of your choice. I simply added Android to snag all those new Google-happy devices using webkit browsers. To wit:

define(‘REQUEST_MOBILE_UA’, ‘(Android|iPhone|MIDP|AvantGo|BlackBerry|J2ME|Opera Mini|DoCoMo|NetFront|Nokia|PalmOS|PalmSource|portalmmm|Plucker|ReqwirelessWeb|SonyEricsson|Symbian|UP\.Browser|Windows CE|Xiino)’);

Step 2. Decide where to put your mobile views

There are several places you could put mobile view files — app/views/elements or app/views/themed come to mind — but I decided on something slightly different. Cake automatically looks for an action’s view files inside a view folder named after the action’s controller. For instance, a page request for users/login expects to find a view file at /app/views/users/login.ctp. Given that, I extended the convention by creating a subfolder named mobile inside each controller’s existing view folder. So, my mobile view for users/login is located at /app/views/users/mobile/login.ctp.

Step 3. Create a mobile layout file

Mobile-optimized pages will need a different layout than standard pages. Create a file named mobile.ctp and save it inside /app/views/layouts.

Step 4. Create the logic for detection and view setting

Here’s where Cake really shines. All we need to do in order to send all mobile devices to any mobile-optimized pages is create the following logic inside the beforeFilter() of /app/app_controller.php.

// check for mobile devices

if ($this->RequestHandler->isMobile()) {

// if device is mobile, change layout to mobile

$this->layout = ‘mobile’;

// and if a mobile view file has been created for the action, serve it instead of the default view file

$mobileViewFile = VIEWS . strtolower($this->params[‘controller’]) . ‘/mobile/’ . $this->params[‘action’] . ‘.ctp’;

if (file_exists($mobileViewFile)) {

$mobileView = strtolower($this->params[‘controller’]) . ‘/mobile/’;

$this->viewPath = $mobileView;

}

}

This code does the following:

Detects mobile browsers using our updated device list

Changes the layout to our new mobile layout

Checks to see if a mobile view file exists inside the mobile subfolder described above.

If the file exists, the logic changes to the mobile view before displaying the page.

One thing to keep in mind about this approach is that it doesn’t allow mobile viewers to switch back to the standard browser view, assuming instead that you’ll take care to retain all essential functions in your mobile views. It does, however, preserve your original URLs across all platforms, with none of that ganky mobile redirection that lesser sites use.

via Mobile browser detection and optimization in CakePHP 1.2 • Made Thing.

Advertisements

What are the Best Tools For Mobile Application Development?

I recently had a strong hunch about mobile based development seeing I live in a country where almost 100 million people haver access to mobile phones.

Looking at the available platforms with the only motive being to develop for the platform that has the most delightful qualities.

I was looking for the following:

1. A very popular mobile phone platform. By platform I mean the Operating system and mobile devices together.

2. A mobile platform that has very good penetration in Africa, and Nigeria, or one that is gaining user adoption fast.

3. A platform that supports economy class mobile devices, and not just the high end devices like the iPads, etc.

4. A platform that supports HTML 5 and has existing tools for seamless mobile application development and testing. The testing part being very, and I mean VERY important.

5. A platform

So I decided to hold off this post for a while up until I found a solution to this heinous situation. I tested some of these tools to see how well they did on my list of qualities above.

If you guessed my result would be awesome and very encouraging, then I can only say you are a very optimistic individual and may your wishes come true. But that assumption was not to be.

Looking through Blackberry (RIM), Android, and IOS (Apple), these seem to be the most active platforms outside of the world of feature phones that have literally flooded the emerging markets of the developing world.

It would be best to develop for at least one of these platforms.

So after some considerations, I settled with the blackberry option. My first experience was a hard stumbling block as the first tool I downloaded and tried (Ripple) was a total mess. Maybe my timing was wrong, but I happened to get a version of Ripple that just didn’t work.

Looking though forums and blog posts, I could only find out that many people had the same problem and could not find a solution.

Finally I settled for the Chrome browser plug-in which seemed to work fine. I wonder why I didn’t consider that option first.