代码之家 › 专栏 › 技术社区 › Sridhar Ratnakumar

Chrome桌面通知示例[关闭]

notifications google-chrome desktop javascript

373

Sridhar Ratnakumar · 技术社区 · 15 年前

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

更新 :这是 a blog post 用一个例子解释webkit通知。

9 回复 | 直到 7 年前

746

Smart Manoj AlexP 5 年前

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

Desktop notifications -触发简单,只要页面打开就可以工作,几秒钟后可能会自动消失
Service Worker notifications -稍微复杂一点,但是它们可以在后台工作(甚至在页面关闭之后),是持久的,并且支持操作按钮

API调用采用相同的参数(除了操作-在桌面通知上不可用),这些参数在 MDN Google's Web Fundamentals 地点。

permission for the Notification API may no longer be requested from a cross-origin iframe ,所以我们不能用StackOverflow的代码片段演示。您需要将此示例保存在站点/应用程序的HTML文件中,并确保使用 localhost://

// 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 应用程序编程接口。不要把这和 Chrome extensions notifications API ,这是不同的。Chrome扩展通知显然只在Chrome扩展中工作,不需要用户的任何特殊权限。

W3C通知可以在许多浏览器中工作(请参阅上的支持) caniuse ),并且需要用户权限。作为一种最佳实践,不要一开始就要求获得这种许可。 Explain to the user first why they would want notifications 看看其他人 push notifications patterns .

请注意,Chrome在Linux上不支持通知图标,因为 this bug .

最后一句话

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

至于为什么会有两个不同的调用具有相同的效果,这取决于您是否在服务工作者中—请参阅 this ticket I filed while I worked at Google .

notify.js 对于助手库。

alex GmonC 6 年前

检查 design 和 API specification (它仍然是一个草稿)或检查源代码(页面不再可用)以获得一个简单的示例:它主要是对 window.webkitNotifications.createNotification .

Gmail Notifier Extension

mpen 4 年前

另请参见 ServiceWorkerRegistration.showNotification

看来 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

Rudie 9 年前

http://www.html5rocks.com/en/tutorials/notifications/quick/#toc-examples 但它使用了旧的变量,所以演示不再有效。 webkitNotifications Notification .

gravmatt 9 年前

从这里获取notify.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) {}
  });

Hina Halani 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>

Altaf Patel 10 年前

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

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

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

Ashley Davis 10 年前

js是新webkit通知的包装器。效果不错。

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