Chrome桌面通知示例

如何使用Chrome桌面通知?我想在我自己的代码中使用它。

更新:下面是一篇博文用一个例子解释webkit通知。

436380 次浏览
小开

检查设计和API规范(它仍然是草稿)或检查来自(页面不再可用)的源代码，以获得一个简单的示例:它主要是对window.webkitNotifications.createNotification的调用。

如果你想要一个更健壮的例子(你试图创建自己的谷歌Chrome扩展，并想知道如何处理权限，本地存储等)，检查Gmail通知扩展:下载crx文件而不是安装它，解压它并阅读它的源代码。

小开

我喜欢:http://www.html5rocks.com/en/tutorials/notifications/quick/#toc-examples，但它使用旧变量，所以演示不再工作。webkitNotifications现在是Notification。

小开
最佳答案

在现代浏览器中，有两种类型的通知:

  • 桌面通知 -很容易触发，只要页面打开就可以工作，几秒钟后可能会自动消失
  • Service Worker通知 -有点复杂，但它们可以在后台工作(即使在页面关闭后)，是持久的，并支持操作按钮

API调用采用相同的参数(除了操作-在桌面通知中不可用)，这些参数在中数和谷歌的网络基础站点的service worker中都有很好的文档。

下面是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>

We're using the W3C Notifications API. Do not confuse this with the Chrome extensions notifications API, which is different. Chrome extension notifications obviously only work in Chrome extensions, and don't require any special permission from the user.

W3C notifications work in many browsers (see support on caniuse), and require user permission. As a best practice, don't ask for this permission right off the bat. Explain to the user first why they would want notifications and see other push notifications patterns.

Note that Chrome doesn't honor the notification icon on Linux, due to this bug.

Final words

Notification support has been in continuous flux, with various APIs being deprecated over the last years. If you're curious, check the previous edits of this answer to see what used to work in Chrome, and to learn the story of rich HTML notifications.

Now the latest standard is at https://notifications.spec.whatwg.org/.

As to why there are two different calls to the same effect, depending on whether you're in a service worker or not - see this ticket I filed while I worked at Google.

See also notify.js for a helper library.

小开

这里有关于api的很好的文档，

https://developer.chrome.com/apps/notifications

谷歌的官方视频解释，

https://developers.google.com/live/shows/83992232-1001

小开

另见ServiceWorkerRegistration.showNotification

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}`);
}
}

< a href = " http://codepen。io/mnbayazit/pen/HnixI" rel="nofollow noreferrer">codepen

小开

js是一个新的webkit通知的包装器。它运行得很好。

< a href = " http://alxgbsn.co。英国/ 2013/02/20 / notify-js-a-handy-wrapper-for-the-web-notifications-api / " rel = " http://alxgbsn.co.uk/2013/02/20/notify-js-a-handy-wrapper-for-the-web-notifications-api/ nofollow”> < / >

小开

我制作了这个简单的通知包装器。它可以在Chrome、Safari和Firefox上运行。

可能在Opera、IE和Edge上也有，但我还没有测试过。

只需从这里https://github.com/gravmatt/js-notify获取通知.js文件并将其放入页面。

干掉鲍尔

$ 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对象作为第二个参数是可选的。

小开 
<!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>


提交答案