Chrome桌面通知示例
如何使用Chrome桌面通知 ？ 我想在我自己的代码中使用它。
更新 ：这里是一个博客文章解释webkit通知与一个例子。
以下是适用于Chrome，Firefox，Opera和Safari的桌面通知的示例。
试试看JSBin 。
// 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>
我们正在使用MDN上logging的W3C Notifications API。 不要将这与Chrome扩展程序通知API混淆，这是不同的。 Chrome扩展程序通知显然只能在Chrome扩展程序中使用，不需要用户的任何特殊许可，支持丰富的文本通知，但会自动消失，用户可能不会注意到它们已被触发 ）。 W3C通知可在许多浏览器中使用（请参阅caniuse支持），要求用户许可，堆叠在先前的通知之上，并且不会在Chrome中自动消失（ 它们在Firefox中执行 ）。
最后的话
通知支持一直处于不断变化之中，在过去的三年里，各种API被弃用。 如果您好奇，请查看此答案的以前修改，以查看Chrome中的工作原理，以及了解富HTML通知的故事。
现在最新的标准是https://notifications.spec.whatwg.org/ 。
还有一个不同的调用 （尽pipe使用相同的参数）从服务人员创build通知， 由于某些原因 ，他们无法访问Notification()构造函数。
另请参阅notify.js以获取帮助程序库。
检查devise和API规范 （它仍然是一个草稿）或检查来自这个网页的一个简单的例子：它主要是调用window.webkitNotifications.createNotification 。
如果您想要更强大的示例（您正在尝试创build自己的Chrome浏览器的扩展程序，并希望知道如何处理权限，本地存储等），请查看Gmail通知程序扩展程序 ：下载crx文件而不是安装它解压缩并阅读它的源代码。
看来， window.webkitNotifications已被弃用和删除。 不过，这里有一个新的API ，它也可以在最新版本的Firefox中运行。
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!"); } }); } // At last, if the user already denied any notification, and you // want to be respectful there is no need to bother him any more. }
codepen
我喜欢： http : //www.html5rocks.com/en/tutorials/notifications/quick/#toc-examples，但它使用旧的variables，所以演示不再工作。 webkitNotifications现在是Notification 。
Notify.js是新的webkit通知的封装。 它工作得很好。
http://alxgbsn.co.uk/2013/02/20/notify-js-a-handy-wrapper-for-the-web-notifications-api/
我做了这个简单的通知包装。 它适用于Chrome，Safari和Firefox。
可能在Opera，IE和Edge上，但我还没有testing过。
只需从这里https://github.com/gravmatt/js-notify获取notify.js文件，并将其放入您的页面。;
把它放在鲍尔
$ bower install js-notify
这是如何工作的：
notify('title', { body: 'Notification Text', icon: 'path/to/image.png', onclick: function(e) {}, // e -> Notification object onclose: function(e) {}, ondenied: function(e) {} });
你必须设置标题，但json对象作为第二个参数是可选的。
<!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>
由于某些原因，接受的答案不适合我，我最终使用了下面的例子：
https://developer.chrome.com/apps/app_codelab_alarms#create-notification
function notifyMe() { chrome.notifications.create('reminder', { type: 'basic', iconUrl: 'icon.png', title: 'Don\'t forget!', message: 'You have things to do. Wake up, dude!' }, function(notificationId) {}); }
