How to get focus to a Chrome tab which created desktop notification?

Question

I would like to implement same functionality as Gmail has nowadays. When new email arrives or new chat comes, notification popup appears and if you click it, the tab with Gmail gets focussed.

I have this code:

var n = window.webkitNotifications.createNotification('ico.gif', 'Title', 'Text');
n.onclick = function(x) { this.cancel(); };
n.show();

When I click notification it makes it just disappear. Now I need to add some code to onclick function to bring up and focus page that created this notification. I know it is possible because GMail does it very well. But I didn't succeed in looking into Gmail sources (they are minimalized and obfuscated).

Anybody knows how to do this ?

this.cancel has been deprecated and removed in the current Canary channel. — brandito, Jul 16 '18 at 04:50

score 118 · Accepted Answer · edited Aug 26 '18 at 01:20

118

You can just place window.focus() in Google Chrome. It will focus to that window when clicked.

var n = window.webkitNotifications.createNotification('ico.gif', 'Title', 'Text');
n.onclick = function(x) { window.focus(); this.close(); };
n.show();

I opened the inspector in Gmail, added the above code, moved to a different tab, and ran it. The notification appeared and once clicked, it brought me back to Gmail.

edited Aug 26 '18 at 01:20

user57368

5,675
28
39

answered Feb 05 '11 at 17:13

Mohamed Mansour

39,445
10
116
90

3

Wow ! That simple ?! :-) Great answer, thank you. I googled quite a while for it, but couldn't find it. Now it works perfectly, thanks again. – Frodik Feb 05 '11 at 17:54
1

No problem! Have fun hacking :-) – Mohamed Mansour Feb 05 '11 at 18:27
Doesnt work now http://jsfiddle.net/l2aelba/RhHgR/ :( , I can hack like do alert() to focus this window back – l2aelba Aug 23 '13 at 09:13
Damm , sorry , JSfiddle using iframe , forgot about that :P – l2aelba Aug 23 '13 at 09:21
3

anyone knows how that now works? Code doesn't focus TAB anymore.. thta means in latest Chrome clicking the notification doesn't focus the tab it was coming from. Does it still wokrk in gmail? – hko Nov 14 '13 at 08:21
it works at least with chrome v48, though this.cancel(); - does not. I use n.close(); and then it works fine. Just use docs on https://developer.mozilla.org/en-US/docs/Web/API/Notification/close By saying it works fine, i mean on notification click chrome is bringed to front & correct tab is focused. – Lukas Liesis Jan 30 '16 at 15:05
This answer has been edited since nickf's comment about it being deprecated. The deprecated part was apparently `this.cancel()`, which has been replaced in the answer above with `this.close()` – Chris Tyler Apr 03 '21 at 22:08

score 55 · Answer 2 · edited Jan 27 '16 at 20:36

55

Using Notifications.

if (typeof Notification !== 'undefined') {
  alert('Please us a modern version of Chrome, Firefox, Opera or Safari.');
  return;
}

Notification.requestPermission(function (permission) {
  if (permission !== 'granted') return;

  var notification = new Notification('Here is the title', {
    icon: 'http://path.to/my/icon.png',
    body: 'Some body text',
  });

  notification.onclick = function () {
    window.focus();
  };
});

edited Jan 27 '16 at 20:36

Christoph

50,121
21
99
128

answered Feb 08 '15 at 06:22

Oswaldo Alvarez

4,772
1
22
20

`window.focus();` does the trick ! It should be marked as right answer. – Maxime Lafarie Nov 29 '16 at 08:57
3

`window.focus()` not work on chrome 60, the jazzcat solution with `parent.focus()` works – pikax Aug 02 '17 at 09:00
This works but as soon as I use "Create shortcut" option and turn it into a standalone app, the redirect is not working and opens a new tab. – Waza_Be Mar 03 '20 at 10:48

jazzcat · Answer 3 · 2017-01-13T20:12:31.953

32

window.focus() does not always work in recent Webkit browser versions (Chrome, Safari etc). But parent.focus() does.

Here's a complete jsfiddle: https://jsfiddle.net/wv0w7uj7/3/

Code:

function notifyMe() {
  if (Notification.permission !== "granted")
    Notification.requestPermission();
  else {
    var notification = new Notification('Notification title', {
      icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
      body: "You've been notified!",
    });

    notification.onclick = function () {
      parent.focus();
      window.focus(); //just in case, older browsers
      this.close();
    };
  }
}

edited Jan 13 '17 at 20:12

answered Dec 04 '16 at 22:18

jazzcat

4,351
5
36
37

1

Is normal to have 'this' referencing to anothe context, so instead of call `this.close`, it's better to call `evt.target.close` of the 'onclick' event: `notification.onclick = function (evt) { evt.target.close(); }` – Alejandro Silva Feb 22 '17 at 03:41
parent.focus(); works for me! working on chrome 68.0.3440.106 – Johan Morales Sep 04 '18 at 14:09
can we just add onload ="parent.focus(); window.focus();" to element ? – user3304007 Mar 08 '21 at 13:41

score 3 · Answer 4 · answered Jan 27 '17 at 11:14

It's not really good practice to use the onclick property, use the addEventListener for vanilla javascript or on method for jQuery.

var notify = new Notification('Test notification');

Vanilla:

notify.addEventListener('click', function(e) {
    window.focus();
    e.target.close();
}, false);

jQuery:

$(notify).on('click', function(e) {
    window.focus();
    e.target.close();
});

score 0 · Answer 5 · answered Aug 11 '16 at 14:16

0

It should be this.close() rather than this.cancel(), like this:

var n = window.webkitNotifications.createNotification('ico.gif','Title', 'Text');
n.onclick = function(x) { window.focus(); this.cancel(); };
n.show();

answered Aug 11 '16 at 14:16

Nathan B

1,625
1
17
15

How to get focus to a Chrome tab which created desktop notification?

5 Answers5

Linked