Cum nu o folosesc Chrome notificări pe desktop? Am'd genul asta folosesc în propriul meu cod.
**** Update: Aici's - un post pe blog explicând webkit notificări cu un exemplu.
În browserele moderne, există două tipuri de notificări:
API apel are aceeași parametri (cu excepția acțiunilor - nu sunt disponibile pe notificări pe desktop), care sunt bine documentate pe MDN și pentru lucrătorii de servicii, pe Google's Web Fundamentals site-ului.
Mai jos este un exemplu de lucru desktop notificări pentru Chrome, Firefox, Opera și Safari. Rețineți că din motive de securitate, începând cu Chrome 62, permisiunea pentru Notificare API nu mai poate fi solicitat de la o cruce de origine iframe, astfel încât să ne putem't acest demo folosind StackOverflow's fragmente de cod. Te'll nevoie pentru a salva acest exemplu într-un fișier HTML pe site-ul/aplicația, și asigurați-vă că pentru a utiliza `localhost:// sau HTTPS.
// request permission on page load
document.addEventListener('DOMContentLoaded', function() {
if (!Notification) {
alert('Desktop notifications not available in your browser. Try Chromium.');
return;
}
if (Notification.permission !== 'granted')
Notification.requestPermission();
});
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: 'Hey there! You\'ve been notified!',
});
notification.onclick = function() {
window.open('http://stackoverflow.com/a/13328397/1269037');
};
}
}
<button onclick="notifyMe()">Notify me!</button>
Am're folosind W3C Notificări API. A nu se confunda acest lucru cu Crom extensii notificări API, care este diferit. Extensia Chrome notificări, evident, numai de muncă în Chrome extensii, și don't nevoie de nici o permisiune specială din partea utilizatorului.
W3C notificări de muncă în mai multe browsere (a se vedea sprijin pe caniuse), și necesită permisiunea utilizatorului. Ca o bună practică, don't cere permisiunea pentru acest lucru, right off bat. Explica pentru primul utilizator ce ar vrea ei notificări și a vedea alte notificări împinge patterns.
Rețineți că Chrome nu't onoarea pictograma de notificare pe Linux, din cauza acest bug.
Suport notificare a fost în flux continuu, cu diverse Api-uri depreciată în ultimii ani. Daca're curios, verificați editări anterioare de acest răspuns pentru a vedea ce a lucrat în Chrome, și să învețe povestea bogat HTML notificări.
Acum cel mai recent standard este la https://notifications.spec.whatwg.org/.
De ce există două apeluri diferite în același sens, în funcție de're într-un serviciu de lucrător sau nu - a se vedea acest bilet am depus-o în timp ce am lucrat la Google.
A se vedea, de asemenea, notify.js pentru un helper library.
Verificați design și specificația API (l's încă un proiect) sau verificați sursa (pagina nu mai este disponibil) pentru un exemplu simplu: It's, în principal, un apel la fereastră.webkitNotifications.createNotification`.
Dacă doriți o mai robust exemplu (ai're încercarea de a crea propria dvs. de Google Chrome's prelungire, și ar dori să știe cum să se ocupe cu permisiuni de stocare locale și astfel), a verifica afară Gmail Notifier Extensie: descărcați de la crx fișier în loc de a-l instala, dezarhivați-l și citiți codul său sursă.
Se pare că fereastra.webkitNotifications` a fost deja învechit și a fost eliminat. Cu toate acestea, nu's o nouă API, și pare să funcționeze în cea mai recentă versiune de Firefox la fel de bine.
function notifyMe() {
// Let's check if the browser supports notifications
if (!("Notification" in window)) {
alert("This browser does not support desktop notification");
}
// Let's check if the user is okay to get some notification
else if (Notification.permission === "granted") {
// If it's okay let's create a notification
var notification = new Notification("Hi there!");
}
// Otherwise, we need to ask the user for permission
// Note, Chrome does not implement the permission static property
// So we have to check for NOT 'denied' instead of 'default'
else if (Notification.permission !== 'denied') {
Notification.requestPermission(function (permission) {
// Whatever the user answers, we make sure we store the information
if(!('permission' in Notification)) {
Notification.permission = permission;
}
// If the user is okay, let's create a notification
if (permission === "granted") {
var notification = new Notification("Hi there!");
}
});
} else {
alert(`Permission is ${Notification.permission}`);
}
}
Îmi place: http://www.html5rocks.com/en/tutorials/notifications/quick/#toc-examples dar acesta utilizează variabile vechi, deci demo-ul nu - 't mai funcționează. webkitNotifications
este acum "Notificare".
Am făcut această Notificare simplu înveliș. Acesta funcționează pe Chrome, Safari și Firefox.
Probabil pe Opera, IE și C, precum și, dar nu am't testat încă.
Doar obține notify.js fișierul de aici https://github.com/gravmatt/js-notify si pune-l in pagina ta.
Ia-l pe Bower
$ bower install js-notify
Acesta este modul în care funcționează:
notify('title', {
body: 'Notification Text',
icon: 'path/to/image.png',
onclick: function(e) {}, // e -> Notification object
onclose: function(e) {},
ondenied: function(e) {}
});
Aveți pentru a seta titlul, dar la obiect json ca al doilea argument este opțional.
Aici este frumos documentația pe Api-uri,
https://developer.chrome.com/apps/notifications
Și, oficial video explicație de Google,
Notify.js este un înveliș în jurul valorii de nou webkit notificări. Acesta funcționează destul de bine.
http://alxgbsn.co.uk/2013/02/20/notify-js-a-handy-wrapper-for-the-web-notifications-api/
<!DOCTYPE html>
<html>
<head>
<title>Hello!</title>
<script>
function notify(){
if (Notification.permission !== "granted") {
Notification.requestPermission();
}
else{
var notification = new Notification('hello', {
body: "Hey there!",
});
notification.onclick = function () {
window.open("http://google.com");
};
}
}
</script>
</head>
<body>
<button onclick="notify()">Notify</button>
</body>