Question

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

更新：以下是a blog post解释webkit通知的示例。

Answer 1

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

Desktop notifications - 简单触发，只要页面打开就可以工作，几秒钟后可能会自动消失
Service Worker notifications - 有点复杂，但它们可以在后台工作（即使在页面关闭后），也是持久的，并且支持操作按钮

API调用采用相同的参数（桌面通知中不提供的操作除外），MDN以及Google's Web Fundamentals网站上的服务工作人员都有详细记录。

以下是适用于Chrome，Firefox，Opera和Safari的桌面通知的工作示例。请注意，出于安全原因，从Chrome 62开始permission for the Notification API may no longer be requested from a cross-origin 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 extensions notifications API混淆，后者不同。 Chrome扩展程序通知显然只能在Chrome扩展程序中使用，并且不需要用户的任何特殊权限。

W3C通知适用于多种浏览器（请参阅caniuse上的支持），并需要用户权限。作为最佳做法，请勿立即请求此许可。 Explain to the user first why they would want notifications并查看其他push notifications patterns。

请注意，由于this bug，Chrome不会尊重Linux上的通知图标。

最后的话

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

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

至于为什么对同一效果有两种不同的调用，取决于你是否在服务工作者中 - 请参阅this ticket I filed while I worked at Google。

另请参阅notify.js以获取帮助程序库。

Answer 2

检查design和API specification（它仍然是草稿）或查看来自（页面不再可用）的来源以获得一个简单示例：它主要是对window.webkitNotifications.createNotification的调用。< / p>

如果您想要一个更强大的示例（您尝试创建自己的Google Chrome扩展程序，并且想知道如何处理权限，本地存储等），请查看Gmail Notifier Extension：下载crx文件而不是安装它，解压缩并读取它的源代码。

Answer 3

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!");
      }
    });
  } else {
    alert(`Permission is ${Notification.permission}`);
  }
}

codepen

Answer 4

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

Answer 5

我制作了这个简单的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对象作为第二个参数是可选的。

Answer 6

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

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

谷歌的官方视频解释，

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

Answer 7

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

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

Answer 8

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

Chrome桌面通知示例

8 个答案:

最后的话