Fatal编程技术网

Javascript Chrome桌面通知示例

javascript google-chrome notifications

Javascript Chrome桌面通知示例,javascript,desktop,google-chrome,notifications,Javascript,Desktop,Google Chrome,Notifications,如何使用？我希望在我自己的代码中使用它 更新：下面用一个示例来解释webkit通知。检查and（它仍然是一个草稿）或检查源代码（页面不再可用）以获得一个简单的示例：它主要是调用窗口.webkitNotifications.createNotification 如果您想要一个更健壮的示例（您正在尝试创建自己的Google Chrome扩展，并且想知道如何处理权限、本地存储等），请查看：下载crx文件而不是安装它，解压缩它并读取其源代码。我喜欢：但它使用旧的变量，因此演示不再工作webkitNoti

如何使用？我希望在我自己的代码中使用它

更新：下面用一个示例来解释webkit通知。

检查and（它仍然是一个草稿）或检查源代码（页面不再可用）以获得一个简单的示例：它主要是调用
窗口.webkitNotifications.createNotification

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

我喜欢：但它使用旧的变量，因此演示不再工作
webkitNotifications
现在是
Notification

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

  • -触发简单，只要页面打开即可工作，几秒钟后可能自动消失
  • -有点复杂，但它们可以在后台工作（即使在页面关闭后），是持久的，并且支持操作按钮
API调用采用相同的参数（除了操作-在桌面通知中不可用），这些参数在站点上和为服务人员提供了详细的文档

下面是Chrome、Firefox、Opera和Safari的桌面通知的工作示例。请注意，出于安全原因，从Chrome62开始，因此我们不能使用StackOverflow的代码片段演示。您需要将此示例保存在站点/应用程序的HTML文件中，并确保使用
localhost://
或HTTPS

//请求页面加载权限
document.addEventListener（'DOMContentLoaded'，function（）{
如果（！通知）{
警报（'您的浏览器中没有桌面通知。请尝试使用Chromium'）；
返回；
}
如果（Notification.permission！==“已授予”）
Notification.requestPermission（）；
});
函数notifyMe（）{
如果（Notification.permission！==“已授予”）
Notification.requestPermission（）；
否则{
var通知=新通知（“通知标题”{
图标：'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
身体：“嘿！已经通知你了！”，
});
notification.onclick=function（）{
打开窗户http://stackoverflow.com/a/13328397/1269037');
};
}
}
通知我这是关于API的很好的文档



谷歌的官方视频解释



另见

似乎
window.webkitNotifications
已被弃用并删除。然而，有一个新的版本，它似乎在最新版本的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}`);
  }
}



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


我制作了这个简单的通知包装器。它适用于Chrome、Safari和Firefox

可能在Opera和Edge上也有，但我还没有测试过

从这里获取notify.js文件，并将其放入您的页面

把它放在鲍尔


$ 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对象作为第二个参数是可选的。


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


你好
函数notify（）{
if（Notification.permission！=“已授予”）{
Notification.requestPermission（）；
}
否则{
var通知=新通知（'hello'{
身体：“嘿，那里！”，
});
notification.onclick=函数（）{
窗口打开（“http://google.com");
};
}
}
通知



难道没有适合所有浏览器的东西吗？@Royi，也有。在Internet Explorer的情况下，一个可能的解决方案是要求您站点的用户下载，因为这是一个使通知生效的可行解决方案。是的。4年后的今天，这个答案已经完全过时了@RoyiNamir：这里有通知API。检查。示例链接已失效。那里的Twitter示例不再有效。您应该告诉其中一个em必须为Twitter工作=）嘿。Hakim是最好的，因为我碰巧遇到了他的演示框架。在HTML通知被弃用后，我留下了截至2012年11月的更新版本。它有一个实际的例子，就像你正在寻找的一样。示例和文章（2013）：-旧文章（2010）：-更新：截至2015年，网站还可以发送真正的推送通知，即使用户不在网站上冲浪，也可以发送推送通知。查看所有这些投票人，将其标记为“必须是IE/狩猎爱好者”。这是特定于浏览器通知的，尤其是对于chrome。如果它如此离题，那么为什么会有那么多人喜欢它，并将其列为主演？为什么离题？@mghaoui-popular！=正确（必然）。我已将此标记为正确答案。window.webkitNotifications.checkPermission（）将在非Chrome浏览器中引发异常。Close不是一个方法。我想您需要通知。cancel（）>>>它似乎也会自行关闭。感谢您的支持，将此与Pusher一起使用帮助我构建了通知系统。不在Chrome版本47.0.2526.80 dev-m中工作，而在Windows 8上使用Mozilla Fire fox时，该API仅在Chrome应用程序和扩展中工作。这与答案不同。请不要只发布代码答案。添加一些注释和/或解释，以便人们将来阅读本文时能够理解。不过，对于这个特定的代码片段，它看起来非常简单。其他用户也可以在评论上发布后续问题，对吗？如果上述代码不起作用，“可能不再从跨源iframe请求对通知API的许可。”。但是，当您打开开发人员控制台并输入
Notification.requestPermission（）时
，然后
var notification=new通知（'hello'，{body:'Hey there！'，}）通知显示。很抱歉，这个答案到底给我增加了什么？@gravmart您遇到问题了吗