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?

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