Chrome桌面通知实例

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

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

rogerdpack
已编辑的问题 9日 八月 2017 в 7:12
编程
notifications google-chrome javascript desktop
16日 二月 2010 в 7:07
23 种观点
对该问题的评论 (6)
解决办法

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

  • 桌面通知 - 触发方式简单，只要页面打开就能工作，几秒钟后可能自动消失
  • 服务工作者通知 --有点复杂，但它们可以在后台工作（甚至在页面关闭后），是持久的，并支持行动按钮。

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');
  };
 }
}
 Notify me!
SmartManoj
编辑本段答案28日 七月 2019 в 1:57
评论(21)

请查看设计和API规范（它仍然是一个草案），或从（不再提供的页面）查看源码，以获得一个简单的例子。它主要是对`window.webkitNotifications.createNotification'的调用。

如果你想要一个更强大的例子（你想创建自己的谷歌浏览器扩展，并想知道如何处理权限、本地存储等问题），请查看Gmail Notifier Extension：下载crx文件而不是安装它，解压并阅读其源代码。

alexi2
编辑本段答案4日 四月 2018 в 1:04
评论(4)

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

codepen

mpen
编辑本段答案20日 三月 2019 в 12:46
评论(4)

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

Rudie
编辑本段答案8日 九月 2015 в 5:38
评论(3)

我做了这个简单的通知包装器。 它可以在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对象是可选的。

gravmatt
编辑本段答案27日 一月 2016 в 1:18
评论(7)

Notify.js 是一个围绕新的 webkit 通知的包装器。 它的工作原理很好。

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

评论(0)





Hello!
<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>



Notify
评论(4)