Question

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

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

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

＆＃13;

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!");
	      }
	    });
	  }
	}

＆＃13;

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

＆＃13;

当我点击按钮时，会出现一个通知给我。但我想创建一个管理面板，当我点击按钮时，应该为访问我网站并允许通知的所有用户显示通知。例如，在5月21日我需要发送类似＆＃34的通知;今天是5月21日你可以得到便宜的东西！＆＃34;必须为允许通知的所有用户显示此消息。谢谢。

Answer 1

编辑：以下代码仅在浏览器处于打开状态时才会发送通知。如果您想在已关闭的网络应用上发送通知，请查看本教程，其中介绍了推送API及其实现方法：https://developers.google.com/web/updates/2015/03/push-notifications-on-the-open-web

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

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

您将能够在这些套接字上发出事件，您将在您将在页面上提供的javascript代码中捕获这些事件。对于您的情况，您可以广播活动＆＃34; send_notification＆＃34;在您需要时为所有用户提供。在您的前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/

我希望它会对你有所帮助！

如何使用Chrome桌面通知

1 个答案: