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

更新:这里有一篇博文用一个例子解释了webkit通知。


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

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


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


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

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

API调用采用相同的参数(除了操作-在桌面通知中不可用),这些参数在MDN和谷歌的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扩展通知API混淆,后者是不同的。Chrome扩展通知显然只适用于Chrome扩展,不需要用户的任何特殊权限。

W3C通知可以在许多浏览器中工作(请参阅对caniuse的支持),并且需要用户许可。作为一种最佳实践,不要立即请求这种许可。首先向用户解释为什么他们想要通知并看到其他推送通知模式。

注意,由于这个bug, Chrome在Linux上不支持通知图标。

最后的话

通知支持一直在不断变化,在过去几年中,各种api被弃用。如果你对此感到好奇,可以查看这个答案的以前版本,看看在Chrome中是如何工作的,并了解丰富的HTML通知的故事。

现在最新的标准在https://notifications.spec.whatwg.org/。

至于为什么会有两个相同效果的不同呼叫,这取决于你是否是服务工作者——看看这张我在谷歌工作时提交的罚单。

另请参阅notify.js中的帮助器库。


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

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

谷歌的官方视频解释,

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


请参见ServiceWorkerRegistration.showNotification

这似乎是一个窗口。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}`);
  }
}

codepen


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

http://alxgbsn.co.uk/2013/02/20/notify-js-a-handy-wrapper-for-the-web-notifications-api/


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

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

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

干掉鲍尔

$ 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>