HTML5 - code example of Notifications API
bobleah 270000CN12 Visits (37468)
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 crea
In my example, this is the resulting notification:
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.