Desktop notifications in Chrome with Javascript

Question

I have an application where I need to send notifications to the user, and I would like them to appear on the desktop, as the example below. It is possible to do so with JavaScript? If yes, how? Did not want to use the alert(), because I find it inconvenient. No need to work in other browsers.

Example of "Checker Plus"

Answer 1

There is a feature being planned for HTML5 called Notification (at the moment only supported [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.

---

Specific solution for Webkit

You can do it through window.webkitNotifications, as 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 first click, the browser will ask the user for permission to display notifications. Once accepted, future clicks will display the notification.

Note: according to the API Chromium (Google Chrome base, for those who don’t know), the method requestPermission accurate 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 permission has been granted, you may call createNotification when you want (maybe in response to a Polling on the server, or a message from a WebSocket, etc). The requestPermission also accepts a callback, if you want to be notified when the user accepts/refuses the permission.

There is also a feature called rich Notifications - that extends the types of content supported in the notification - but I don’t know it in detail. Link to the API.

Source of the sample code: that answer in the SOEN