Desktop notifications in Chrome with Javascript

22

I have an application where I need to send notifications to the user, and I would like these to appear on the desktop, as shown in the example below. Is it possible to do it with Javascript ? If yes, how? I did not want to use alert() , because I find it inconvenient. It does not have to work in other browsers.

Checker Plus Notifier Example

    
asked by anonymous 17.01.2014 / 01:43

1 answer

24

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

    
17.01.2014 / 02:20