“HTML5 is a badge for the way the Web is changing”
— James Pearce, Head of Mobile Developer Relations, Facebook
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.
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.
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.
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.
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.
|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.|