How to get focus to a Chrome tab which created desktop notification?
Solution 1
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.
Solution 2
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();
};
});
Solution 3
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();
};
}
}
Solution 4
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();
});
Frodik
My favourite programming languages: PHP5, Javascript, jQuery SOreadytohelp
Updated on August 26, 2020Comments
-
Frodik over 3 years
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 ?
-
Frodik over 13 yearsWow ! That simple ?! :-) Great answer, thank you. I googled quite a while for it, but couldn't find it. Now it works perfectly, thanks again.
-
Mohamed Mansour over 13 yearsNo problem! Have fun hacking :-)
-
l2aelba over 10 yearsDoesnt work now jsfiddle.net/l2aelba/RhHgR :( , I can hack like do alert() to focus this window back
-
l2aelba over 10 yearsDamm , sorry , JSfiddle using iframe , forgot about that :P
-
hko over 10 yearsanyone 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?
-
Lukas Liesis over 8 yearsit works at least with chrome v48, though this.cancel(); - does not. I use n.close(); and then it works fine. Just use docs on 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.
-
Maxime Lafarie over 7 years
window.focus();
does the trick ! It should be marked as right answer. -
Alejandro Silva about 7 yearsIs normal to have 'this' referencing to anothe context, so instead of call
this.close
, it's better to callevt.target.close
of the 'onclick' event:notification.onclick = function (evt) { evt.target.close(); }
-
pikax almost 7 years
window.focus()
not work on chrome 60, the jazzcat solution withparent.focus()
works -
Johan Morales over 5 yearsparent.focus(); works for me! working on chrome 68.0.3440.106
-
Waza_Be about 4 yearsThis 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.
-
user3304007 about 3 yearscan we just add onload ="parent.focus(); window.focus();" to <body> element ?
-
Chris Tyler about 3 yearsThis 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 withthis.close()