In my previous blog series on HTML5 code examples
, I covered ContentEditable, FileReader, LocalStorage, Geolocation, Drag & Drop, and other API's, demonstrating the usage of these HTML5 interfaces. As the spec matures, HTML5 interfaces are becoming more widely available in a variety of web browsers, however today I will be demonstrating an API that at this time is limited to the Google Chrome browser.
This blog entry will discuss what I consider to be a base interface required for mobile computing: Notifications. A key advantage of mobile computing is the platforms standby and startup properties. Unlike the traditional workstation platform, where a user typically navigates to an application to perform a task, with mobile computing, the task often times alerts you of a change or action to take.
For example: I navigate to Facebook on my desktop browser any number of times a day to see if I have any friend updates waiting for me. However, on my iPhone, when a Facebook friend updates my river of news, a notification is sent, and my iPhone alerts me.
The Notifications API is as simple as it is powerful. First, you must request the users permission to display notifications from your domain. You do this with the requestPermission() method:
Next, you construct the notification itself using the createNotification() method, which takes 3 arguments: Image, Title, Body.
var notification =
In my example, this is the resulting notification:
Multiple notifications will stack:
Here is a Notifications example: (If you are running Chrome, click the generate a notification link below)
You can download the complete HTML of this example by clicking here
In summary, I believe that the HTML5 specification is going to revolutionize web apps, creating new opportunities not just in the desktop web browser arena, but also in mobile computing. Interfaces such as Notifications are critical to mobile app development and it is encouraging to see this implemented as part of the base specification. I'm looking forward to the day when the full HTML5 API spec is supported by all of the major web and mobile browsers.