如何使用 chrome 桌面通知向许多用户发送通知答案

【问题标题】：How to sent notifications to many user with chrome desktop notification如何使用 chrome 桌面通知向许多用户发送通知
【发布时间】：2016-03-13 20:44:59
【问题描述】：

您好，我想向访问我网站的客人发送桌面通知。

所以我需要为此使用 Chrome api。因为只有chrome浏览器才有桌面通知。

这是我发送通知的代码。我检查了这个Chrome Desktop Notification Example

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 whether notification permissions have already been granted
	  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
	  else if (Notification.permission !== 'denied') {
	    Notification.requestPermission(function (permission) {
	      // If the user accepts, let's create a notification
	      if (permission === "granted") {
	        var notification = new Notification("Hi there!");
	      }
	    });
	  }
	}

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="check.js"></script>
</head>
<body>
	<input type="button" onclick="notifyMe()" value="Send Notification"></input>
</body>
</html>

当我单击按钮时，会为我显示一条通知。但是我想创建一个管理面板，当我单击按钮时，应该为访问我的网站并允许通知的所有用户显示通知。例如，在 5 月 21 日，我需要发送“今天是 5 月 21 日，您可以买到便宜货！”之类的通知。必须为所有允许通知的用户显示此消息。谢谢。

【问题讨论】：

标签： javascript google-chrome notifications

【解决方案1】：

EDIT ：以下代码仅在浏览器打开时发送通知。如果您想在关闭的网络应用程序上发送通知，请查看介绍推送 API 以及如何实现它的本教程：https://developers.google.com/web/updates/2015/03/push-notifications-on-the-open-web

这是我的建议：您可以在 Web 应用程序中使用 socket.io。 Socket.io 可以在您的服务器和您网站的所有用户之间实现基于事件的实时双向通信。

为了让它工作，你应该有一个运行 nodejs 的服务器。每次用户加载您的页面时，都会在他和您的服务器之间创建一个套接字连接。

您将能够在这些套接字上发出事件，您将在页面上提供的 javascript 代码中捕获这些事件。对于您的情况，您可以在需要时向所有用户广播事件“send_notification”。在您的前端 js 脚本中，当您从服务器收到此事件时发送通知。

socket.io 最酷的部分是您可以广播 avent 并附加到它数据。在您的情况下，它可能是您的通知消息。

示例代码：

app.js（服务器部分）

var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);

server.listen(8080);

app.get('/', function (req, res) {
  res.sendfile('index.html');
});

io.on('connection', function (socket) {

  io.sockets.emit('notification', { message: 'Hello the world' });
  socket.on('my other event', function (data) {
    console.log(data);
  });
});

index.html。（前半部分）

<html>
   <head>
   </head>
   <body>
      <h1>HELLO</h1>
      <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
      <script>
         function notifyMe(message) {
           // Let's check if the browser supports notifications
           if (!("Notification" in window)) {
             alert("This browser does not support notifications");
           }

           // Let's check whether notification permissions have already been granted
           else if (Notification.permission === "granted") {
             // If it's okay let's create a notification
             var notification = new Notification(message);
           }

           // Otherwise, we need to ask the user for permission
           else if (Notification.permission !== 'denied') {
             Notification.requestPermission(function (permission) {

               // We store the authorization information
               if(!('permission' in Notification)) {
                 Notification.permission = permission;
               }

               // If the user accepts, let's create a notification
               if (permission === "granted") {
                 var notification = new Notification(message);
               }
             });
           }


         }


          // Connect to the server
           var socket = io.connect('https://socket-io-notif-maximilienandile.c9users.io:8080');
           // WHEN we receive the notification event execute the notifyMe function
           socket.on('notification', function (data) {
             notifyMe(data.message);
           });
      </script>
   </body>
</html>

为了实现它，请查看这个官方的 socket.io 教程链接： http://socket.io/docs/#using-with-the-express-framework

然后，您应该在 app.js 中决定何时广播该事件。每次用户加载您应用的 index.html 页面时，都会在此处广播该事件。

这是我用 cloud9 做的例子。这里的通知是在连接后触发的。 https://ide.c9.io/maximilienandile/socket_io_notif 您可以在此处查看实时应用程序： https://socket-io-notif-maximilienandile.c9users.io/

希望对你有帮助！

【讨论】：

也检查这个以前的答案它也可以解决你的问题：stackoverflow.com/a/35720229/2862130.
非常感谢您的建议！还有，你知道push cramp api的工作逻辑吗？我想制作自己的 api，这样我的客户就可以将其用于他们的网站，而不仅仅是我。
我不知道这个但我会看看它，谢谢
我有一些问题，你为什么使用 var socket = io.connect('socket-io-notif-maximilienandile.c9users.io:8080');当我单击（本地主机：8080）上的按钮时，它会出现一个通知，但我没有设备来测试它。我现在可以向所有允许权限的用户发送桌面通知吗？
您应该将“socket-io-notif-maximilienandile.c9users.io:8080”替换为您的应用程序（或本地主机）的 url。如果你通过 app.js 中的 socket.io 广播一个事件，它将把它发送到现在连接的所有套接字。