Rei*_*ica 395 javascript desktop notifications google-chrome
如何使用Chrome桌面通知？我想在我自己的代码中使用它.
更新:这是一篇博客文章,通过示例解释webkit通知.
Dan*_*scu 691
以下是适用于Chrome,Firefox,Opera和Safari的桌面通知的工作示例.请注意,出于安全原因,从Chrome 62开始,可能无法再从跨域iframe请求Notification API的权限,因此您需要将此示例保存在网站/应用程序的HTML文件中,并确保使用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>我们正在使用MDN上记录的W3C Notifications API .不要将此与Chrome扩展程序通知API混淆,后者不同.Chrome扩展程序通知显然只适用于Chrome扩展程序,不需要用户的任何特殊权限,支持富文本通知,但会自动消失,用户可能不会注意到它们已被触发).W3C通知适用于许多浏览器(请参阅caniuse支持),需要用户权限,在之前的通知之上堆栈,并且不会在Chrome中自动消失(他们在Firefox中执行).
通知支持一直在不断变化,过去三年中各种API都被弃用.如果您感到好奇,请查看此答案的先前修改,以查看以前在Chrome中工作的内容,并了解丰富的HTML通知的故事.
现在最新的标准是https://notifications.spec.whatwg.org/.
还有一个不同的调用(尽管具有相同的参数)来从服务工作者创建通知,由于某种原因,这些通知无法访问localhost://构造函数.
另请参阅notify.js以获取帮助程序库.
Gmo*_*onC 85
检查设计和API规范(它仍然是草稿)或检查来源(页面不再可用)的简单示例:它主要是调用window.webkitNotifications.createNotification.
如果您想要一个更强大的示例(您尝试创建自己的Google Chrome扩展程序,并且想知道如何处理权限,本地存储等),请查看Gmail通知程序扩展:下载crx文件而不是安装它,解压缩并阅读其源代码.
mpe*_*pen 33
它似乎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}`);
}
}
Rud*_*die 14
我喜欢:http://www.html5rocks.com/en/tutorials/notifications/quick/#toc-examples但它使用的是旧变量,所以演示不再适用了.webkitNotifications现在Notification.
我制作了这个简单的通知包装器。它适用于 Chrome、Safari 和 Firefox。
可能也适用于 Opera、IE 和 Edge，但我还没有测试过。
只需从这里获取 notify.js 文件https://github.com/gravmatt/js-notify并将其放入您的页面。
在 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 对象是可选的。
小智 5
<!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>
| 归档时间： |
|
| 查看次数： |
349730 次 |
| 最近记录： |