it-swarm-es.com

¿Cómo enfocarte en una pestaña de Chrome que creó una notificación de escritorio?

Me gustaría implementar la misma funcionalidad que Gmail tiene hoy en día. Cuando llega un nuevo correo electrónico o aparece un nuevo chat, aparece una ventana emergente de notificación y, si hace clic en él, la pestaña con Gmail se enfoca.

Tengo este codigo

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

Cuando hago clic en la notificación, simplemente desaparece. Ahora debo agregar algo de código a la función onclick para abrir y enfocar la página que creó esta notificación. Sé que es posible porque GMail lo hace muy bien. Pero no logré buscar en las fuentes de Gmail (están minimizadas y ofuscadas).

¿Alguien sabe cómo hacer esto?

74
Frodik

Simplemente puede colocar window.focus () en Google Chrome. Se enfocará en esa ventana cuando se haga clic.

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

Abrí el inspector en Gmail, agregué el código anterior, lo moví a una pestaña diferente y lo ejecuté. Apareció la notificación y, una vez que se hizo clic, me devolvió a Gmail.

95
Mohamed Mansour

Utilizando Notificaciones .

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() no siempre funciona en versiones recientes del navegador Webkit (Chrome, Safari, etc.). Pero parent.focus() hace.

Aquí hay un completo jsfiddle: https://jsfiddle.net/wv0w7uj7/3/

Código:

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

No es una buena práctica usar la propiedad onclick, usar el método addEventListener para javascript Vanilla o el método on para jQuery.

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

Vainilla:

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

jQuery:

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

Debería ser this.close() en lugar de this.cancel(), así:

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