Chrome桌面通知示例

我们正在使用MDN上记录的W3C Notifications API .不要将此与Chrome扩展程序通知API混淆,后者不同.Chrome扩展程序通知显然只适用于Chrome扩展程序,不需要用户的任何特殊权限,支持富文本通知,但会自动消失,用户可能不会注意到它们已被触发).W3C通知适用于许多浏览器(请参阅caniuse支持),需要用户权限,在之前的通知之上堆栈,并且不会在Chrome中自动消失(他们在Firefox中执行).

最后的话

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

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

还有一个不同的调用(尽管具有相同的参数)来从服务工作者创建通知,由于某种原因,这些通知无法访问localhost://构造函数.

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

检查设计和API规范(它仍然是草稿)或检查来源(页面不再可用)的简单示例:它主要是调用window.webkitNotifications.createNotification.

如果您想要一个更强大的示例(您尝试创建自己的Google Chrome扩展程序,并且想知道如何处理权限,本地存储等),请查看Gmail通知程序扩展:下载crx文件而不是安装它,解压缩并阅读其源代码.

它似乎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

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