I am trying to setup browser notification for a project I'm working on. The code I have so far is:

// Notification permissions logic handled before...
var notification = new Notification('Title', { body: 'Message' });
notification.onclick = function (e) {
    window.focus();
    // this.cancel();
};
setTimeout(notification.close.bind(notification), 5000);

The notifications work fine with this code except for one thing. In Chrome clicking on the notification does not set the focus on the browser window. In Firefox this behavior is native out of the box and it works fine without on click handler defined above. I have looked for the solution for this for Chrome and found these:

How to get focus to the tab when a desktop notification is clicked in Firefox?

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

However the suggested accepted solutions do not work for me - the event is triggered but the focus is not set.

Does anyone have any suggestions how to make this behave properly?

Chrome version: Version 44.0.2403.130 m

Firefox version: 40.0

I am trying to setup browser notification for a project I'm working on. The code I have so far is:

// Notification permissions logic handled before...
var notification = new Notification('Title', { body: 'Message' });
notification.onclick = function (e) {
    window.focus();
    // this.cancel();
};
setTimeout(notification.close.bind(notification), 5000);

The notifications work fine with this code except for one thing. In Chrome clicking on the notification does not set the focus on the browser window. In Firefox this behavior is native out of the box and it works fine without on click handler defined above. I have looked for the solution for this for Chrome and found these:

How to get focus to the tab when a desktop notification is clicked in Firefox?

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

However the suggested accepted solutions do not work for me - the event is triggered but the focus is not set.

Does anyone have any suggestions how to make this behave properly?

Chrome version: Version 44.0.2403.130 m

Firefox version: 40.0

• javascript
• browser
• notifications
• web-notifications

• You ever find a solution? I'm having a similar problem (not related to notifications but still with me losing and not being able to re-get keyboard focus to a tab). – Quinxy von Besiex Commented Jan 12, 2016 at 3:34
• @QuinxyvonBesiex No I have not. If you find it please answer it here... – Marko Commented Jan 12, 2016 at 15:21
• I posted an updated answer here stackoverflow./a/40964355/714733 @Marko – jazzcat Commented Dec 4, 2016 at 22:20
• 2 Instead of window.focus(); use parent.focus(); . it worked for me in Chrome and Firefox. – Sonal Commented Feb 1, 2017 at 2:36

2 Answers 2

It's an hacky solution, but if you registered a service worker you could do something like this.

In the client page:

yourServiceWorkerRegistration.showNotification('Title', {
  body: 'Message',
});

In the service worker:

self.addEventListener('notificationclick', event => {
  event.notification.close();

  event.waitUntil(
    clients.matchAll({
      type: "window",
    })
    .then(clientList => {
      if (clientList.length) {
        clientList[0].focus();
      }
    })
  );
});

Now, my chrome version is 100.0.4896.127. And window.focus() works perfect in onclick of notification callback! It would be helpful to anyone who sees this issue.