首页 文章

Chrome桌面通知示例[关闭]

提问于
浏览 次
370

如何使用Chrome desktop notifications？我想在我自己的代码中使用它 .

Update ：这是a blog post用一个例子解释webkit通知 .

javascript desktop google-chrome notifications

9 回答

  • 647

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

    回复于
  • 14

    我制作了这个简单的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) {}
  });

    您必须设置 Headers ，但json对象作为第二个参数是可选的 .

    回复于
  • 4

    检查design和API specification（它's still a draft) or check the source from (page no longer available) for a simple example: It'主要是对 window.webkitNotifications.createNotification 的调用 .

    如果你想要一个更健壮的例子（你're trying to create your own Google Chrome'的扩展名，并且想知道如何处理权限，本地存储等），请查看Gmail Notifier Extension：下载crx文件而不是安装它，解压缩并阅读其源代码 .

    回复于
  • 1
    <!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>
    回复于
  • 4

    似乎已经弃用并删除了 window.webkitNotifications . 但是，有一个new 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!");
      }
    });
  }

  // At last, if the user already denied any notification, and you 
  // want to be respectful there is no need to bother him any more.
}

    codepen

    回复于
  • 83

    Notify.js是新webkit通知的包装器 . 它工作得很好 .

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

    回复于
  • 31

    由于某些原因，接受的答案对我不起作用，我最终使用了以下示例：

    https://developer.chrome.com/apps/app_codelab_alarms#create-notification

    function notifyMe() {

    chrome.notifications.create('reminder', {
        type: 'basic',
        iconUrl: 'icon.png',
        title: 'Don\'t forget!',
        message: 'You have  things to do. Wake up, dude!'
    }, function(notificationId) {});

}
    回复于
  • 4

    以下是适用于Chrome，Firefox，Opera和Safari的桌面通知的工作示例 . 请注意，出于安全原因，从Chrome 62开始，permission for the Notification API may no longer be requested from a cross-origin iframe，因此您需要将此示例保存在网站/应用程序的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>

    我们使用W3C Notifications API，记录在MDN . 不要将它与Chrome extensions notifications API混淆，后者是不同的 . Chrome扩展程序通知显然只适用于Chrome扩展程序，不需要用户的任何特殊权限，支持富文本通知，但disappear automatically and the user may not notice they have been triggered） . W3C通知在许多浏览器中都有效（请参阅caniuse上的支持），需要用户权限，在上一个通知之上叠加，并且不会在Chrome中自动消失（they do in Firefox） .

    最后的话

    通知支持一直在不断变化，过去三年中各种API都被弃用 . 如果您感到好奇，请查看此答案的先前修改，以查看以前在Chrome中工作的内容，并了解丰富的HTML通知的故事 .

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

    还有一个different call（虽然具有相同的参数）来创建来自服务工作者的通知，for some reason无法访问 Notification() 构造函数 .

    有关帮助程序库，另请参见notify.js .

    回复于
  • 3

    这是关于API的很好的文档，

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

    而且，谷歌的官方视频解释，

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

    回复于

相关问题