- Beyond Basic HTML
- Bridging the Divide
- Getting Things Done with WebSockets and Web Workers
- Application Cache
- Database API
- Web Storage
- Geolocation
- Getting Users' Attention with Notifications
- Media Elements
- HTML5 Drawing APIs
- Conveying Information with Microdata
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
Getting Users' Attention with Notifications
In HTML4, the options to communicate messages to the user were limited. You could show the user an alert window or show a message in a div element. Showing an alert window is well supported on all browsers, but it is highly disruptive. It is something that requires immediate attention and doesn't let you move on until you have handled it. One sure way to annoy a user is by making him lose a life because some message obscured his view. Showing a message in a div element fares slightly better, but there isn't a standard way to add them. These types of messages can be easily ignored. On one side we have notifications that crave attention, and on the other we have notifications that can be easily ignored. There has to be a middle ground. Enter web notifications.
On the Mac OS X and Ubuntu platforms natively, and with a plugin on Windows, an application can send configurable messages to users and notify them of events or changes it deems important. An example of such a notification is shown in Figure 1-5.
)
Figure 1-5 Desktop notification message
Like their desktop counterparts, web notifications can contain an image along with a contextual message.
Requesting Permission to Display Notifications
Before we can display notifications to users, we first have to get their permission. Explicit permission protects the users from being bombarded with unwanted notifications. We can request permission to display notifications by executing the following:
window.webkitNotifications.requestPermission();
This will show a contextual message in the browser to allow the user to approve or deny access, as shown in Figure 1-6. Instead of a no-argument function call, we can also pass a function to execute when the user responds to the prompt.
)
Figure 1-6 Web notification permissions message
We can likewise verify permission by running the following command:
window.webkitNotifications.checkPermission();
In this case, checkPermission() returns an integer that indicates the permission level, as shown in Table 1-3.
Table 1-3. Notification Permission Level
|
Constant Name |
Value |
|
PERMISSION_ALLOWED |
0 |
|
PERMISSION_UNKNOWN |
1 |
|
PERMISSION_DENIED |
2 |
Looking at the name, you would expect notifications to work in at least the major Webkit browsers, namely Chrome and Apple Safari. Although Safari uses Webkit, it doesn't implement the Notification API. If the spec is implemented globally, the namespace could presumably change from webkitNotifications to simply notifications.
Creating Notifications
You can create two types of notifications: simple and HTML. Simple notifications display a simple message with an optional title and icon image, whereas HTML notifications display an arbitrary URL. For example, we can create a simple notification by executing the following:
var msg = window.webkitNotifications.createNotification(
'', 'Test Notification', 'Hello World'
);
Our notification will have the title "Test Notification" with the message "Hello World." Because we passed an empty string for the icon image, the API omits it. We can do this for any other parameter. Do this to hide parameters you don't want displayed. Passing no value to the function will cause a text message of "undefined" or a broken image link. Figure 1-7 shows our notification running in the browser. As you can see, it is pretty Spartan, and we have no control over the design besides the parameters we passed it.
)
Figure 1-7 Simple web notification
As mentioned before, HTML notifications can get their content from an arbitrary URL such as a website or an image. The function just takes the desired URL to display in the form:
var msg =window.webkitNotifications.createHTMLNotification(
'http://example.com'
);
HTML notifications give you no means to resize them, and unless the URL has code to optimize the notification for small screens, scroll bars will probably be included. On a 1680x1050 screen, the default size seems to be approximately 300 pixels wide by 50 pixels high, but because the notifications API is still a draft at the time of this writing, that is certainly subject to change. Until fine-grained height and width attributes are added, stick with simple notifications.
Interacting with Notifications
The resulting notification has two basic functions for controlling it: show(), which surfaces the notification to the user, and cancel(), which hides the notification if it's currently visible or prevents it from being displayed if it is not visible. Web notifications can also execute functions in response to notification events. Table 1-4 shows a list of the applicable functions you can specify to respond to events.
Table 1-4. Web Notification Functions
|
Function Name |
Description |
|
onclick |
This function will execute if the notification is clicked and the underlying platform supports it. Avoid this event if at all possible. |
|
onclose |
This function will execute after the close event is fired. This could be when the user closes the notification or if it is closed programmatically. |
|
ondisplay |
This function will execute after the show() function is called and the notification is visible to the user. |
|
onerror |
This function executes after show() is called in the event of an error. |
You can check the current status of the draft specification at http://dev.chromium.org/developers/design-documents/desktop-notifications/api-specification.