Desktop notifications in Chrome with Javascript


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


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: '',
    body: "Texto da notificação"
notification.onclick = function() {"");

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) {
  var notification = window.webkitNotifications.createNotification(
    'Chrome notification!',
    'Here is the notification text'

  notification.onclick = function () {"");
} else {

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