在现代浏览器中,有两种类型的通知。
API调用需要相同的参数(除了动作--在桌面通知上不可用),这些参数在MDN上有很好的记录,对于服务工作者,在Google's Web Fundamentals网站上也有记录。
下面是一个用于Chrome、Firefox、Opera和Safari的桌面通知的工作实例。请注意,由于安全原因,从Chrome 62开始,通知API的权限可能不再从跨源iframe请求,所以我们不能用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 Notifications API。请不要将其与Chrome extensions notifications API混淆,后者是不同的。Chrome扩展通知显然只在Chrome扩展中起作用,并且不需要用户的任何特殊许可。
W3C通知在许多浏览器中都可以使用(见caniuse上的支持),并且需要用户许可。作为一个最佳实践,不要一开始就要求这种许可。首先向用户解释他们为什么需要通知,并查看其他推送通知模式。
请注意,由于这个错误,Chrome浏览器在Linux上不支持通知图标。
通知支持一直在不断变化,在过去的几年里,各种API都被废弃了。如果你感到好奇,可以查看本答案的前几期编辑,看看过去在Chrome中的工作情况,并了解富HTML通知的故事。
现在最新的标准是在https://notifications.spec.whatwg.org/。
至于为什么会有两种不同的调用来达到相同的效果,这取决于你是否在服务工作者中--见我在谷歌工作时提交的这张票据。
也可参见notify.js,了解一个辅助库。
请查看设计和API规范(它仍然是一个草案),或从(不再提供的页面)查看源码,以获得一个简单的例子。它主要是对`window.webkitNotifications.createNotification'的调用。
如果你想要一个更强大的例子(你想创建自己的谷歌浏览器扩展,并想知道如何处理权限、本地存储等问题),请查看Gmail Notifier Extension:下载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}`);
}
}
我做了这个简单的通知包装器。 它可以在Chrome、Safari和Firefox上使用。
可能在Opera、IE和Edge上也可以,但我还没有测试过。
只要从这里得到notify.js文件https://github.com/gravmatt/js-notify,然后把它放到你的页面中。
1:
在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对象是可选的。
Notify.js 是一个围绕新的 webkit 通知的包装器。 它的工作原理很好。
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>