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

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

我试图了解我们是否可以使用桌面通知来实现向浏览器的推送通知，我相信这是Web Notification API的作用。我在此处和此处看到了有关如何实现Chrome浏览器的google文档。

现在仍然无法理解的是：

1. 我们可以使用GCM / APNS向所有Web浏览器（包括Firefox和Safari）发送推送通知吗？
2. 如果不通过GCM，我们可以拥有自己的后端吗？

我相信所有这些答案都可以在一个答案中为许多有类似困惑的人提供帮助。

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

更新（2018年5月）： 这是来自Google的有关Web推送通知的全面且写得很好的文档。

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

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

答： 自2018年4月起，Google已弃用GCM。您现在可以使用Firebase Cloud Messaging（FCM）。这支持所有平台，包括Web浏览器。

2. 如果不通过GCM，我们可以拥有自己的后端吗？

答：是的，可以从我们自己的后端发送推送通知。所有主要的浏览器都支持相同的功能。

从Google 检查此代码实验室，以更好地了解其实现。

一些教程：

• 在Django Here中实现推送通知。
• 使用flask发送推送通知Here＆Here。
• 在此处从Nodejs发送推送通知
• 在此处和此处使用php发送推送通知
• 从Wordpress发送推送通知。这里和这里
• 从Drupal发送推送通知。这里

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

• NodeJ。
• 的PHP
• 滑轨
• 蟒蛇
• 去郎- 这个和这个

进一步阅读： --Firefox网站上的文档可在此处阅读。-可以在此处找到有关 Google Web Push的很好概述。 - 常见问题解答，解答最常见的困惑和问题。

是否有任何免费服务可以做同样的事情？ 有一些公司提供免费，免费增值和付费模式的类似解决方案。我在下面列出了一些：

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

注意： 选择免费服务时，请记住阅读TOS。免费服务通常通过收集用于各种目的（包括分析）的用户数据来工作。

除此之外，您还需要HTTPS来发送推送通知。但是，您可以通过letsencrypt.org免费获得https

哈维尔介绍了通知和当前限制。

我的建议：window.postMessage在我们等待残障浏览器赶上时，否则Worker.postMessage()仍要与Web Workers一起运行。

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

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

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

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

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

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

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

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

我认为您可能正在寻找Notification：

https://developer.mozilla.org/zh-CN/docs/Web/API/notification

它可以在Chrome，Firefox，Opera和Safari中运行。

我假设您正在谈论的是即使在用户不浏览您的网站时也可以传递的真实推送通知（否则请查看WebSockets或诸如长轮询之类的旧方法）。

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

GCM仅适用于Chrome，而APNs仅适用于Safari。每个浏览器制造商都提供自己的服务。

如果不通过GCM，我们可以拥有自己的后端吗？

Push API需要两个后端！一个由浏览器制造商提供，并负责将通知传递到设备。另一个应该是您自己的（或者您可以使用第三方服务（例如Pushpad）），并负责触发通知并联系浏览器制造商的服务（例如GCM，APN，Mozilla推送服务器）。

披露：我是Pushpad创始人

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

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

我可以重新定义您的问题，如下所示

我们可以拥有自己的后端来将推送通知发送到Chrome，Firefox，Opera和Safari吗？

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

请参阅浏览器推送存储库以获取有关使用自己的后端为您的Web应用实现Web推送通知的指南。它以示例方式说明了如何在没有任何第三方服务的情况下为Web应用程序添加Web推送通知支持。

截至目前，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 ...

我建议使用pubnub。我尝试从浏览器使用ServiceWorkers和PushNotification，但是，当我尝试使用它时，webviews不支持此功能。

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