Chrome 桌面通知示例
在现代浏览器中，有两种类型的通知：
- 桌面通知- 触发简单，只要页面打开就可以工作，并且可能会在几秒钟后自动消失
- Service Worker 通知- 有点复杂，但它们可以在后台工作（即使在页面关闭后），是持久的，并且支持操作按钮
API 调用采用相同的参数（除了操作 - 在桌面通知上不可用），这些参数在MDN和服务工作者以及Google 的 Web Fundamentals站点上都有详细记录。
下面是Chrome、Firefox、Opera 和 Safari桌面通知的工作示例。请注意，出于安全原因，从 Chrome 62 开始，可能不再从跨域 iframe 请求通知 API 的权限，因此我们无法使用 StackOverflow 的代码片段对此进行演示。您需要将此示例保存在站点/应用程序上的 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 通知API。不要将此与Chrome扩展通知 API混淆，后者是不同的。Chrome 扩展程序通知显然只适用于 Chrome 扩展程序，不需要用户的任何特殊许可。
W3C 通知适用于许多浏览器（请参阅caniuse 上的支持），并且需要用户许可。作为最佳实践，不要立即请求此许可。首先向用户解释他们为什么需要通知并查看其他推送通知模式。
请注意，由于此错误，Chrome 不支持 Linux 上的通知图标。
最后的话
通知支持一直在不断变化，在过去几年中，各种 API 被弃用。如果您好奇，请查看此答案的先前编辑以了解过去在 Chrome 中工作的内容，并了解富 HTML 通知的故事。
现在最新的标准是在https://notifications.spec.whatwg.org/。
至于为什么有两个不同的调用具有相同的效果，这取决于您是否在服务工作者中 - 请参阅我在 Google 工作时提交的这张票。
另请参阅notify.js以获取帮助程序库。
检查设计和API 规范（它仍然是一个草案）或检查来自（页面不再可用）的源代码以获取一个简单示例：主要是调用window.webkitNotifications.createNotification.
如果您想要一个更强大的示例（您正在尝试创建自己的 Google 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!");
}
});
} else {
alert(`Permission is ${Notification.permission}`);
}
}
我喜欢：http : //www.html5rocks.com/en/tutorials/notifications/quick/#toc-examples但它使用旧变量，所以演示不再工作。webkitNotifications现在是Notification。
我制作了这个简单的通知包装器。它适用于 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 对象是可选的。