如何使用Chrome桌面通知?我想在我自己的代码中使用它。
更新:这是一篇博客文章,其中以示例解释了Webkit通知。
在现代浏览器中,有两种通知类型:
- 桌面通知 -易于触发,只要打开页面即可工作,并且可能在几秒钟后自动消失
- Service Worker通知 -稍微复杂一点,但它们可以在后台(即使关闭页面后)仍可工作,并且是持久性的,并支持操作按钮
API调用采用相同的参数(操作除外,在桌面通知中不可用),这些参数已在Google的Web基础网站上的MDN和服务工作者中得到了充分的记录。
以下是适用于Chrome,Firefox,Opera和Safari 的桌面通知的工作示例。请注意,出于安全原因,从Chrome 62开始,可能不再需要跨源iframe请求Notification 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 Notifications API。请勿将此与Chrome 扩展通知API混淆。Chrome扩展程序通知显然仅在Chrome扩展程序中有效,并且不需要用户的任何特殊权限。
W3C通知可在许多浏览器中运行(请参见caniuse上的支持),并且需要用户许可。最佳做法是,不要立即寻求该许可。首先向用户解释为什么他们想要通知并查看其他推送通知模式。
请注意,由于该bug,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/zh-CN/tutorials/notifications/quick/#toc-examples,但是它使用的是旧变量,因此该演示不再起作用。webkitNotifications
现在Notification
。
我做了这个简单的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对象作为第二个参数是可选的。
这是有关API的不错的文档,
https://developer.chrome.com/apps/notifications
而且,由Google提供的官方视频解释,
https://developers.google.com/live/shows/83992232-1001
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>
文章标签:desktop , google-chrome , javascript , notifications
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!