如何发送推送通知到web浏览器?

过去几个小时我一直在阅读推送通知API和Web通知API。我还发现谷歌和苹果分别通过GCM和APNS提供免费的推送通知服务。

我正在尝试了解我们是否可以使用桌面通知实现浏览器推送通知，我相信这是Web通知API所做的。我看到了一个谷歌文档关于如何为Chrome在这里和这里。

现在我还不明白的是:

我们是否可以使用GCM/APNS向包括Firefox和Safari在内的所有Web浏览器发送推送通知? 如果不通过GCM，我们可以有自己的后端来做同样的事情吗?

我相信所有这些答案都可以帮助很多有类似困惑的人。

当前回答

我假设你说的是真正的推送通知，即使用户没有浏览你的网站(否则请检查WebSockets或传统方法，如长轮询)。

我们是否可以使用GCM/APNS向包括Firefox和Safari在内的所有Web浏览器发送推送通知?

GCM只适用于Chrome, apn只适用于Safari。每个浏览器制造商都提供自己的服务。

如果不通过GCM，我们可以有自己的后端来做同样的事情吗?

Push API需要两个后端!一个是由浏览器制造商提供的，负责向设备发送通知。另一个应该是你自己的(或者你可以使用像Pushpad这样的第三方服务)，负责触发通知和联系浏览器制造商的服务(即GCM、apn、Mozilla推送服务器)。

披露:我是Pushpad的创始人

2016-03-21 11:02:16

其他回答

GCM/APNS分别只适用于Chrome和Safari。

我想你可能在寻找通知:

https://developer.mozilla.org/en-US/docs/Web/API/notification

它适用于Chrome、Firefox、Opera和Safari。

2015-11-17 15:56:45

到目前为止，GCM只适用于chrome和android。同样，firefox和其他浏览器也有自己的api。

现在的问题是，如何实现推送通知，使其适用于所有具有自己后端的常见浏览器。

你需要客户端脚本代码，即service worker，参考(谷歌推送通知)。尽管这对其他浏览器来说是一样的。

2.在使用Ajax获得端点后，将其与浏览器名称一起保存。

3.您需要创建后端，其中有字段的标题，消息，图标，点击URL根据您的需求。现在，在单击发送通知之后，调用函数send_push()。例如，在这里为不同的浏览器编写代码

3.1. 在chrome

 $headers = array(
          'Authorization: key='.$api_key(your gcm key),
          'Content-Type: application/json',
     );
   $msg = array('to'=>'register id saved to your server');
   $url = 'https://android.googleapis.com/gcm/send';
   $ch = curl_init();

      // Set the url, number of POST vars, POST data
      curl_setopt($ch, CURLOPT_URL, $url);
      curl_setopt($ch, CURLOPT_POST, true);
      curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
      curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

      curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
      curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($msg));

      $result = curl_exec($ch);

3.2. mozilla

$headers = array(            
              'Content-Type: application/json',
              'TTL':6000
            );

       $url = 'https://updates.push.services.mozilla.com/wpush/v1/REGISTER_ID_TO SEND NOTIFICATION_ON';

      $ch = curl_init();

      // Set the url, number of POST vars, POST data
      curl_setopt($ch, CURLOPT_URL, $url);
      curl_setopt($ch, CURLOPT_POST, true);
      curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
      curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

      curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);


      $result = curl_exec($ch);

其他浏览器请谷歌…

2016-10-17 07:29:14

我建议使用pubnub。我尝试使用ServiceWorkers和推送通知从浏览器，然而，当我尝试它的webview不支持这一点。

https://www.pubnub.com/docs/web-javascript/pubnub-javascript-sdk

2017-05-23 12:58:28

您可以通过服务器端事件将数据从服务器推送到浏览器。这本质上是一个单向流，客户端可以从浏览器“订阅”到它。从这里，你可以创建新的通知对象，作为se流到浏览器:

var source = new EventSource('/events');

source.on('message', message => {
  var notification = new Notification(message.title, {
    body: message.body
  });
});

Eric Bidelman写的这篇文章有点老，但它解释了SSE的基础知识，并提供了一些服务器代码示例。

2015-11-23 22:47:40