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

Posted 2021-04-08

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

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

现在仍然无法理解的是：

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

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

答案

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

更新（2018年5月）：Here is a全面，并且是一篇关于谷歌网络推送通知的精心编写的文档。

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

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

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

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

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

检查Google的this codelab以更好地了解实施情况。

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

• NodeJs.
• PHP
• Rails
• Python
• Go Lang - this和this

进一步阅读：

• Firefox网站上的文档可以是read here。
• 谷歌Web推送的一个非常好的概述可以是found here.
• An FAQ answering最常见的混淆和问题。

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

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

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

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

另一答案

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

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

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

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

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

另一答案

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

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

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

有点旧，但this article by Eric Bidelman解释了SSE的基础知识，并提供了一些服务器代码示例。

另一答案

GCM / APNS仅适用于Chrome和Safari。

我想你可能在寻找Notification：

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

It works in Chrome, Firefox, Opera and Safari。

另一答案

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

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

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

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

Push API需要两个后端！一个由浏览器制造商提供，负责向设备发送通知。另一个应该是您的（或者您可以使用像Pushpad这样的第三方服务）并负责触发通知并联系浏览器制造商的服务（即GCM，APN，Mozilla push servers）。

披露：我是Pushpad的创始人

另一答案

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

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

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

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

另一答案

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

现在讨论如何实现推送通知，以便它适用于具有自己后端的所有常见浏览器。

1. 您需要客户端脚本代码，即服务工作者，请参阅（Google push notification）。虽然这对其他浏览器来说仍然相同。

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

对于其他浏览器请谷歌...

另一答案

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

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

另一答案

我建议使用pubnub。我尝试从浏览器使用服务工作者和推送通知，但是当我尝试它时，webviews不支持这一点。

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