Wie kann ich mich auf eine Chrome-Registerkarte konzentrieren, die eine Desktop-Benachrichtigung erstellt hat?

Ich möchte die gleiche Funktionalität implementieren, die Google Mail heutzutage hat. Wenn eine neue E-Mail eintrifft oder ein neuer Chat eingeht, wird ein Benachrichtigungs-Popup angezeigt. Wenn Sie darauf klicken, wird die Registerkarte mit Google Mail fokussiert.

Ich habe diesen Code:

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

Wenn ich auf Benachrichtigung klicke, verschwindet sie einfach. Jetzt muss ich der Onclick-Funktion Code hinzufügen, um die Seite aufzurufen und zu fokussieren, die diese Benachrichtigung erstellt hat. Ich weiß, dass es möglich ist, weil GMail es sehr gut macht. Es ist mir jedoch nicht gelungen, Google Mail-Quellen zu untersuchen (sie sind minimiert und verschleiert).

Weiß jemand wie das geht?

Sie können window.focus () einfach in Google Chrome platzieren. Beim Klicken wird das Fenster fokussiert.

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

Ich habe den Inspektor in Google Mail geöffnet, den obigen Code hinzugefügt, bin zu einer anderen Registerkarte gewechselt und habe ihn ausgeführt. Die Benachrichtigung wurde angezeigt und brachte mich nach dem Klicken zurück zu Google Mail.

Mit Benachrichtigungen .

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();
  };
});

window.focus()funktioniert nicht immer in aktuellen Webkit-Browserversionen (Chrome, Safari usw.). Aber parent.focus()tut es.

Hier ist eine vollständige 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();
    };
  }
}

Es ist nicht wirklich empfehlenswert, die onclickEigenschaft, das addEventListenerVanille-Javascript oder die onMethode für jQuery zu verwenden.

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

Vanille:

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

jQuery:

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

Es sollte this.close()eher this.cancel()so sein:

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