The State of HTML5 Mobile in 2012

“HTML5 is a badge for the way the Web is changing”
– James Pearce, Head of Mobile Developer Relations, Facebook

Is HTML5 a W3C specification buzzword, or is it a term used to describe a host of technologies such as CSS3, JavaScript APIs, WebGL and more? For me, HTML5 is exactly as James Pearce puts it: it’s a badge or a logo for the way the Web is changing. The specification itself is getting closer to being finalized; however, new related specifications and ideas continue to make the Web a development platform for all types of applications. These ideas are breaking down the walls that currently prevent Web developers from building brilliant applications that work on all browsers and devices. There is more work ahead to make this happen, but progress is being made.

In light of these HTML5 specification changes, this post will focus on the topics that are of relevance for creating HTML5 mobile Web applications, which promises to be a big breakthrough trend in the coming year.

Tapping into device features using Device APIs

Ever since the explosion in popularity of mobile applications or “apps,” there has been an ongoing debate between developers about which development approach is better: native or Web. One of the largest pitfalls of the Web approach has been that the access to device features such as the camera, contacts and sensors, has been pretty much non-existent on most popular devices. In 2011, the W3C published a number of public working drafts for API specifications that define how devices and browsers should allow access to such features. Let’s take a brief look at some of these features now.

Battery Status API

This API exposes information about the current status of the device’s battery to Web applications. Using the API, applications can check the battery level, determine if the device is being charged, and find out how long before the battery is fully charged (if charging) or discharged (if not charging). The API also exposes several events, which can notify the application when the device has been plugged in or out of a power source, when the level of battery remaining has changed, or when the time remaining for charging/discharging has changed. Using this API, applications can adapt the way they work, depending upon the condition of the battery, thus using less power when the battery is running low.

Contacts API

The Contacts API gives Web applications read access to a device’s address book. The API standardizes a series of asynchronous methods and object properties that can be used to search the address book and read information about contacts such as name, phone numbers, email addresses and more.

Media Capture API

One of the missing features from mobile Web applications that I most often hear complaints about is access to the camera (and to a lesser extent, the microphone). The Media Capture API defines enhancements to the HTML file input type. This allows developers to specify how the field should capture data using a source other than the file system, such as the camera, video camera (camcorder) or microphone. A separate specification is being worked on to allow developers programmatic access to these input sources.

Messaging API

The Messaging API provides access to the device’s messaging functionality: SMS, MMS and e-mail. It exposes an asynchronous method for sending messages with or without attachments using the sms:, mms: and mailto: URI schemes. This will make it possible for users to send messages from a Web application without launching a separate application.

Network Information API

This API exposes connectivity information, which allows developers to detect what type of network connection the device is using: Ethernet, Wi-Fi, 2G, 3G, 4G or none. This API is designed to supplement the Offline Applications section of the HTML5 specification, which includes events that fire when the device changes network status from online to offline or vice-versa.

Sensor API

This is a relatively new API that exposes a standard series of methods and events for retrieving raw data from the various sensors available on the user’s device. Some of the sensors this may cover include temperature, ambient light, ambient noise, magnetic field, proximity, accelerometer, gyroscope and compass.

Vibration API

The Vibration API allows developers to provide tactile feedback to users of their applications in the form of a pulse or vibration. This is a widespread feature on mobile phones, typically used to alert the user to incoming calls and messages when the device is in silent mode. The API has various potential uses. It could be used to give feedback to the user if there is an input error on a form, or it could indicate negative actions (such as being hit) in a game.

Web Notifications API

The Web Notifications API defines a means of creating simple notifications that can be used to notify users of application events that may require further action. An example is in a webmail application, where a new mail has arrived. In this instance, the application should unobtrusively inform the user that they have new mail. If the user wishes to view this new message, they should be able to click (or tap, in the case of a mobile device) on the alert and it will bring them to the message. Otherwise, they should be able to ignore the message and continue what they are doing without any further action required on the notification itself. The Web Notifications API has been supported in Google Chrome since version 5, but has yet to be supported by any other browser. Because they are of particular usefulness in mobile Web applications, I am hopeful that this particular specification will gain traction in the mobile browser space in the coming year.

HTML5 Speech Input API

If you use the Google Chrome browser, you may have noticed recently that when you visit google.com, the search box has a microphone icon on the right-hand-side. If your computer has a microphone, you can speak your search query rather than type it, and Google will go and fetch the search results automatically (Figure 1).

Figure 1. Google Speech Input in action

With Apple’s breakthrough in speech recognition with its Siri feature on iPhone 4S, and with Google’s speech search functionality, 2012 looks like it will be a big year for speech input, putting the HTML5 Speech Input API in the spotlight.

All of the HTML5 mobile APIs mentioned here are worth keeping an eye on, since they will have a big impact on mobile Web application development going forward.

Safari Books Online has the content you need

To get started developing HTML5 mobile apps, take a look at the following titles that are in Safari Books Online.

	Head First Mobile Web puts your JavaScript, CSS, and HTML5 skills to work, optimizing your site to perform its best in the demanding mobile market.
	Sams Teach Yourself HTML5 Mobile Application Development in 24 Hours provides you with step-by-step instructions, guiding you through the most common HTML5 mobile development tasks.
	Mobile Web Design For Dummies® is the practical guide to go to if you’re contemplating Web design in a mobile world.
	Pro jQuery Mobile will teach you how to create responsive, native-looking applications for iOS, Android, Windows Phone and Blackberry.
	The Programming the Mobile Web will teach you the intricacies and pitfalls involved in building HTML and CSS-based mobile apps to work with the iPhone, Android devices, and other smartphones.

About this author

Joe Lennon is a Web and Mobile applications developer from Cork, Ireland. He works as Product Manager of Mobile Solutions for Core International, one of the UK and Ireland’s leading enterprise HR software vendors. Joe is the author of Beginning CouchDB, and is co-author of the forthcoming title HTML5 in Action. He is also a regular contributor to the IBM developerWorks library. You can learn more about Joe and his work on his website at http://www.joelennon.ie.