There is a feature being planned for HTML5 called Notification
(currently supported only [on desktop] by Firefox, Chrome and Safari):
Notification.requestPermission(/* opcional: callback */);
...
var notification = new Notification("Título", {
icon: 'http://i.stack.imgur.com/dmHl0.png',
body: "Texto da notificação"
});
notification.onclick = function() {
window.open("http://stackoverflow.com");
}
Example in jsFiddle .
WebKit specific solution
You can do this through window.webkitNotifications
, as shown in the example below:
var havePermission = window.webkitNotifications.checkPermission();
if (havePermission == 0) {
// 0 is PERMISSION_ALLOWED
var notification = window.webkitNotifications.createNotification(
'http://i.stack.imgur.com/dmHl0.png',
'Chrome notification!',
'Here is the notification text'
);
notification.onclick = function () {
window.open("https://stackoverflow.com/a/13328397/1269037");
notification.close();
}
notification.show();
} else {
window.webkitNotifications.requestPermission();
}
Example in jsFiddle . When you click for the first time, the browser will prompt the user for permission to view notifications. Once accepted, future clicks will display the notification.
Note: According to API of chromium (Google Base Chrome, for those who do not know), the requestPermission
method needs to be called in response to a user action, otherwise it will have no effect.
This method should only be called while handling a user gesture; in other circumstances it will have no effect.
However, once the permission has been granted, you can call createNotification
when you want (perhaps in response to a polling on the server, or a message of WebSocket
, etc) . requestPermission
also accepts a callback , if you want to be notified when the user accepts / declines the permission.
There is also a feature called rich notifications - which greatly extends the types of content supported in the notification - but I do not know it in detail. Link to the API .
Sample code source: this answer in SOEN