Chrome桌面通知示例[关闭]

409

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

更新：这是一篇博客文章，其中以示例解释了Webkit通知。

javascript  desktop  google-chrome  notifications 
— 斯里达·拉特纳库玛（Sridhar Ratnakumar）
source
2
在HTML通知被弃用之后，我留下了以下截至2012年11月更新的答案。它有一个实际的示例，就像您要查找的示例一样。
— Dan Dascalescu 2012年
1
— Christophe Roussy
1
更新：从2015年起，网站还可以发送真实的推送通知，即使用户不浏览该网站也可以发送。看看这个答案
— collimarco
3
所有将其标记为已关闭的选民都必须是IE / Safari爱好者。它特定于浏览器通知，尤其是针对Chrome。如果它不是主题，那么为什么会有那么多人喜欢它并将其标记为已加星标呢？
— prash
2
为什么没有话题？
— SmartManoj

Answers:

716

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

  • 桌面通知 -易于触发，只要打开页面即可使用，并且可能在几秒钟后自动消失
  • Service Worker通知 -稍微复杂一点，但是它们可以在后台（即使关闭页面后）也可以工作，并且是持久性的，并支持操作按钮

API调用采用相同的参数（操作除外-在桌面通知中不可用），这些参数在 在Google的Web基础站点 MDN和服务工作者中。

以下是适用于Chrome，Firefox，Opera和Safari 的桌面通知的工作示例。请注意，出于安全原因，从Chrome 62开始，可能不再从跨域iframe请求对Notification API的许可，因此我们无法使用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通知 API。请勿将此与Chrome 扩展通知API混淆。Chrome扩展程序通知显然仅在Chrome扩展程序中有效，并且不需要用户的任何特殊权限。

W3C通知可在许多浏览器中使用（请参阅有关caniuse的支持），并且需要用户许可。最佳做法是，不要立即寻求许可。首先向用户解释为什么他们想要通知并查看其他推送通知模式。

请注意，由于此bug，Chrome无法使用Linux上的通知图标。

最后的话

通知支持一直在不断变化，最近几年不推荐使用各种AP​​I。如果您感到好奇，请查看此答案的先前版本，以查看Chrome以前的工作方式，并了解丰富的HTML通知的故事。

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

至于为什么要打两次电话才能达到相同的效果，具体取决于您是否在服务人员中-请参阅我在Google工作期间提交的这张票证。

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

— 丹·达斯卡斯库
source
4
@mghaoui-流行！= true（必要）。我已将此标记为正确答案。
— Sridhar Ratnakumar 2013年
2
window.webkitNotifications.checkPermission（）将抛出非Chrome浏览器，一个例外
— JT泰勒
2
关闭不是一种方法。我认为您想要notification.cancel（）> decadecity.net/blog/2012/10/12/webkit-notification-api >>而且它似乎也自行关闭。
— 虚伪的国王（KingOfHypocrites）
3
感谢您的支持，将其与Pusher配合使用有助于构建通知系统。
— Awijeet
3
在Windows 8上的Mozilla Fire Fox上工作时，无法在Chrome版本47.0.2526.80 dev-m中工作
— Sarz 2015年
87

检查设计和API规范（仍是草稿），或检查（不再提供页面的来源）中的简单示例：主要是对的调用window.webkitNotifications.createNotification。

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

— GmonC
source
是否有适用于所有浏览器的功能？
— 罗伊·纳米尔
@Royi，有一个Firefox扩展，以及迟早将要发布的本地Firefox实现。对于Internet Explorer，可能的解决方案是要求您网站的用户下载Chrome Frame，因为这是使通知正常工作的可行解决方案。还有其他一些Microsoft解决方案。
— 布赖恩·菲尔德
7
四年后的今天，这个答案已经完全过时了。@RoyiNamir：有Notifications API。检查我的答案。
— Dan Dascalescu 2015年
1
示例链接已失效。
— Vinny
33

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

码笔

— 彭
source
@Miron请查看第一段中的超链接。我链接了源，然后按照SO礼节将代码复制到我的答案中。如果MDN不是维基，那么我可能会更明确地说明作者是谁，但我并不假装。
— mpen
我看不到他说他在哪里写的吗？
— 布兰迪托
Codepen不起作用
— Stepan
1
@StepanYakovenko重试codepen链接。我else在末尾添加了一个额外的内容以告诉您问题所在。您可能像我一样在全球禁用了通知：\
— mpen
4

我做了这个简单的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对象是可选的。

— 重力
source
@gravmatt您在Firefox中遇到问题吗？如果打开了多个浏览器窗口，则不会出现通知？
— eran otzap
@eranotzap它应该与多个选项卡一起使用。我运行的项目没有问题。但我不确定是否有多个窗口。
— gravmatt
我在多个标签上
— 都遇到
它可以在Firefox中的多个选项卡中工作吗？
— eran otzap
1
@eranotzap我现在在Windows和Mac上对其进行了测试。我在屏幕的任何角落都看不到该通知，但是我听到了通知的声音，在Mac上，我在侧边栏中得到了通知（打开了多个标签）。Firefox是新的Internet Explorer。
— gravmatt
3 
<!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>

— 希娜·哈拉尼（Hina Halani）
source
1
请不要发布仅代码的答案。添加一些评论和/或解释，以便以后人们阅读此帖子时，他们将理解它。
— 阿德里亚
但是，对于这个特定的代码片段，它似乎非常简单。其他用户也可以在评论中发布后续问题，对吗？
— frostshoxx
1
具有以上代码的JSfiddle无法正常工作，“可能不再从跨域iframe请求对Notification API的许可。”。但是，当您打开开发人员控制台并输入时Notification.requestPermission();，var notification = new Notification('hello', { body: "Hey there!", });将显示通知。
— Kai Noack
抱歉，这个答案对我有什么帮助？
— 丹·达斯卡斯库
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.