【问题讨论】：
标签： javascript desktop google-chrome notifications
window.webkitNotifications 似乎已被弃用和删除。但是，有一个new 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!");
}
});
} else {
alert(`Permission is ${Notification.permission}`);
}
}
【讨论】：
else 来告诉你问题是什么。您可能像我一样在全球范围内禁用了通知：\
在现代浏览器中，有两种类型的通知：
API 调用采用相同的参数（操作除外 - 在桌面通知中不可用），这些参数在 MDN 和 Google's Web Fundamentals 网站上都有详细记录。
以下是适用于 Chrome、Firefox、Opera 和 Safari 的 桌面 通知的工作示例。请注意，出于安全原因，从 Chrome 62 开始，permission for the Notification API may no longer be requested from a cross-origin iframe，所以我们不能使用 StackOverflow 的代码 sn-ps 来演示这个。您需要将此示例保存在您的站点/应用程序的 HTML 文件中，并确保使用 localhost:// 或 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>我们正在使用W3C Notifications API。不要将此与 Chrome extensions notifications API 混淆，后者是不同的。 Chrome 扩展通知显然只适用于 Chrome 扩展，不需要用户的任何特殊许可。
W3C 通知适用于许多浏览器（请参阅caniuse 上的支持），并且需要用户许可。作为最佳实践，不要立即请求此许可。 Explain to the user first why they would want notifications 并查看其他 push notifications patterns。
请注意，由于this bug，Chrome 不支持 Linux 上的通知图标。
通知支持一直在不断变化，过去几年已弃用了各种 API。如果您感到好奇，请查看此答案的先前编辑，了解 Chrome 中过去的工作原理，并了解富 HTML 通知的故事。
现在最新的标准是https://notifications.spec.whatwg.org/。
至于为什么会有两个不同的调用达到相同的效果，这取决于您是否在服务工作者中 - 请参阅this ticket I filed while I worked at Google。
有关帮助程序库，另请参阅 notify.js。
【讨论】：
查看design 和API specification（它仍然是草稿）或查看来源（页面不再可用）以获取一个简单示例：主要是对window.webkitNotifications.createNotification 的调用。
如果您想要一个更强大的示例（您正在尝试创建自己的 Google Chrome 扩展程序，并且想知道如何处理权限、本地存储等），请查看 Gmail Notifier Extension：下载 crx 文件而不是安装它，解压缩并阅读它的源代码。
【讨论】：
<!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>
【讨论】：
Notification.requestPermission(); 时，就会出现var notification = new Notification('hello', { body: "Hey there!", }); 通知。
我制作了这个简单的通知包装器。它适用于 Chrome、Safari 和 Firefox。
可能也在 Opera、IE 和 Edge 上，但我还没有测试过。
只需从此处https://github.com/gravmatt/js-notify 获取 notify.js 文件并将其放入您的页面。
在 Bower 上获得它
$ 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 对象是可选的。
【讨论】：
我喜欢：http://www.html5rocks.com/en/tutorials/notifications/quick/#toc-examples，但它使用旧变量，所以演示不再起作用。 webkitNotifications 现在是 Notification。
【讨论】：
Notify.js 是新的 webkit 通知的包装器。效果很好。
http://alxgbsn.co.uk/2013/02/20/notify-js-a-handy-wrapper-for-the-web-notifications-api/
【讨论】：
【讨论】：