Jak uzyskać koncentrację na karcie Chrome, która tworzy powiadomienia na pulpicie?

Question

Chciałbym wdrożyć tę samą funkcjonalność, co obecnie Gmail. Gdy nadejdzie nowa wiadomość e-mail lub pojawi się nowy czat, pojawi się okienko powiadomień, a jeśli je klikniesz, karta z Gmailem zostanie skoncentrowana.

mam ten kod:

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

Kiedy klikam zgłoszenie to sprawia, że ​​po prostu zniknąć. Teraz muszę dodać kod do funkcji onclick, aby wywołać i ustawić stronę, na której utworzono to powiadomienie. Wiem, że jest to możliwe, ponieważ GMail robi to bardzo dobrze. Ale nie udało mi się zajrzeć do źródeł Gmaila (są one zminimalizowane i zaciemnione).

Ktoś wie, jak to zrobić?

Answer 1

Możesz po prostu umieścić window.focus() w przeglądarce Google Chrome. Skoncentruje się na tym oknie po kliknięciu.

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

Otworzyłem inspektora w Gmailu, dodałem powyższy kod, przeniesiono do innej karty i uruchomiłem. Powiadomienie pojawiło się i po kliknięciu przywróciło mnie do Gmaila.

Mam nadzieję, że pomogło!

Answer 2

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

Answer 3

Powinno być this.close() zamiast this.cancel(), tak:

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

Answer 4

window.focus() nie zawsze działa w najnowszych wersjach przeglądarek Webkit (Chrome, Safari, itp). Ale robi to parent.focus().

Oto pełna jsfiddle: https://jsfiddle.net/wv0w7uj7/3/

Kod:

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

Answer 5

To naprawdę nie jest dobra praktyka, aby skorzystać z właściwości onclick użyj addEventListener dla wanilii JavaScript lub on metoda jQuery.

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

Vanilla:

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

jQuery:

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