如何将推送通知发送到Web浏览器？

Question

我过去几个小时一直在阅读关于Push Notification API和Web Notification API的内容.我还发现Google和Apple分别通过GCM和APNS免费提供推送通知服务.

我试图了解我们是否可以使用桌面通知向浏览器实施推送通知,我相信这是Web Notification API所做的.我在这里和这里看到了关于如何为Chrome做这件事的谷歌文档.

现在仍然无法理解的是:

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

我相信在一个答案中回答的所有问题都可以帮助很多有类似困惑的人.

Answer 1

所以我在这里回答我自己的问题.我从过去构建推送通知服务的人那里获得了所有查询的答案.

更新(2018年5月): 这是一本关于Google推送通知的综合性且写得很好的文档.

回答3年前提出的原始问题:

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

答: 自2018年4月起,Google已弃用GCM.您现在可以使用Firebase云消息传递(FCM).这支持所有平台,包括Web浏览器.

2. 如果不是通过GCM我们可以拥有自己的后端来做同样的事情吗？

答:可以,推送通知可以从我们自己的后端发送.所有主流浏览器都支持相同的功能.

请查看Google的此codelab,以便更好地了解其实施情况.

用各种编程语言实现自己的后端:

• 的NodeJS.
• PHP
• 轨道
• 蟒蛇
• 去郎 - 这和这个

进一步阅读:

• 可以在此处阅读 Firefox网站上的文档.
• 可以在此处找到有关 Google推送的非常好的概述.
• 常见问题回答最常见的混淆和问题.

有没有免费服务做同样的事情？ 有些公司提供免费,免费增值和付费模式的类似解决方案.上面列出了几个:

1. https://onesignal.com/(免费|支持所有平台)
2. https://firebase.google.com/products/cloud-messaging/(免费)
3. https://clevertap.com/(有免费计划)
4. https://goroost.com/

注意: 选择免费服务时,请记住阅读服务条款.免费服务通常通过收集用户数据来实现各种目的,包括分析.

除此之外,您需要使用HTTPS来发送推送通知.但是你可以通过letsencrypt.org免费获得https

Answer 2

Javier介绍了通知和当前的限制.

我的建议是:window.postMessage当我们等待残障浏览器赶上时,Worker.postMessage()还是要继续与Web Workers一起运营.

这些可以是具有对话框消息显示处理程序的后备选项,用于当通知功能测试失败或权限被拒绝时.

通知具有功能和拒绝权限检查:

if (!("Notification" in window) || (Notification.permission === "denied") ) {
    // use (window||Worker).postMessage() fallback ...
}

Answer 3

您可以通过服务器端事件将数据从服务器推送到浏览器.这本质上是客户端可以从浏览器"订阅"的单向流.从这里开始,您可以在NotificationSSE流入浏览器时创建新对象:

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

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

有点旧,但Eric Bidelman的这篇文章解释了SSE的基础知识,并提供了一些服务器代码示例.

Answer 4

GCM/APNS仅适用于Chrome和Safari.

我想你可能在寻找Notification:

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

它适用于Chrome,Firefox,Opera和Safari.

Answer 5

这是对所有浏览器进行推送通知的简单方法https://pushjs.org

Push.create("Hello world!", {
body: "How's it hangin'?",
icon: '/icon.png',
timeout: 4000,
onClick: function () {
    window.focus();
    this.close();
 }
});

Answer 6

我假设您正在谈论即使用户没有浏览您的网站也可以提供真正的推送通知(否则请查看WebSockets或遗留方法,如长轮询).

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

GCM仅适用于Chrome,APN仅适用于Safari.每个浏览器制造商都提供自己的服务

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

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

披露:我是Pushpad的创始人

Answer 7

我可以重新定义你的问题,如下所示

我们可以拥有自己的后端向Chrome,Firefox,Opera和Safari发送推送通知吗？

是.到今天(2017/05),您可以使用相同的客户端和服务器端实现来处理Chrome,Firefox和Opera(没有Safari).因为他们以相同的方式实现了Web推送通知.这是W3C的Push API协议.但Safari有自己的旧架构.所以我们必须单独维护Safari.

请参阅browser-push repo以获取指南,以使用您自己的后端为您的网络应用实施网络推送通知.它通过示例解释了如何在没有任何第三方服务的情况下为Web应用程序添加Web推送通知支持.

Answer 8

截至目前，GCM仅适用于chrome和android。同样，firefox和其他浏览器也有自己的api。

现在来讨论如何实现推送通知，以便它可以在具有后端的所有常见浏览器中使用。

1. 您需要客户端脚本代码，即服务工作者，请参考（Google推送通知）。尽管对于其他浏览器来说仍然如此。

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

3.您需要创建一个后端，其中包含标题，消息，图标，单击URL的字段，具体取决于您的要求。现在，单击发送通知后，调用一个函数send_push（）。例如，在此为不同的浏览器编写代码

3.1。镀铬

 $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);

对于其他浏览器，请google ...