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

嗨，我想向访问过我网站的来宾发送桌面通知。

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

这是我发送通知的代码。我查看了此Chrome桌面通知示例

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 日你可以买到便宜的东西！必须为允许通知的所有用户显示此消息。谢谢。

编辑：以下代码仅在浏览器打开时发送通知。如果要在关闭的 Web 应用程序上发送通知，请查看本教程，其中介绍了推送 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 并附加到其数据。在您的情况下，它可能是您的通知消息。

示例代码：

应用程序.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);
  });
});

索引.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

在应用中.js应决定何时广播事件。在这里，每次用户加载应用的 index.html 页面时都会广播该事件。

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

希望对您有所帮助！

相关内容

最新更新

热门标签：