web-dev-qa-db-fra.com

Comment se concentrer sur un Chrome qui a créé une notification sur le bureau?

Je voudrais implémenter la même fonctionnalité que Gmail a de nos jours. Lorsque de nouveaux e-mails arrivent ou qu'un nouveau chat arrive, une fenêtre de notification apparaît et si vous cliquez dessus, l'onglet avec Gmail se concentre.

J'ai ce code:

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

Lorsque je clique sur la notification, elle disparaît. Maintenant, je dois ajouter du code à la fonction onclick pour afficher et mettre en évidence la page qui a créé cette notification. Je sais que c'est possible car GMail le fait très bien. Mais je n'ai pas réussi à chercher dans les sources Gmail (elles sont minimisées et obscurcies).

Quelqu'un sait comment faire ça?

javascriptgoogle-chromewebkitnotificationsgmail
76
Frodik

Vous pouvez simplement placer window.focus () dans Google Chrome. Il se concentrera sur cette fenêtre lorsque vous cliquez dessus.

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

J'ai ouvert l'inspecteur dans Gmail, ajouté le code ci-dessus, déplacé vers un autre onglet et l'ai exécuté. La notification est apparue et une fois cliquée, elle m'a ramené à Gmail.

97
Mohamed Mansour

Utilisation de 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();
  };
});
46
Oswaldo Alvarez

window.focus() ne fonctionne pas toujours dans les versions récentes du navigateur Webkit (Chrome, Safari, etc.). Mais parent.focus() le fait.

Voici un jsfiddle complet: 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();
    };
  }
}
22
jazzcat

Ce n'est pas vraiment une bonne pratique d'utiliser la propriété onclick, utilisez la méthode addEventListener pour javascript Vanilla ou la méthode on pour jQuery.

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

Ce devrait être this.close() plutôt que this.cancel(), comme ceci:

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