206

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

我试图了解我们是否可以使用桌面通知向浏览器实现推送通知，我相信这就是 Web 通知 API 所做的。我在此处和此处看到了有关如何为 Chrome 完成此操作的谷歌文档。

现在仍然无法理解的是：

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

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

4

9 回答 9

200

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

更新（2018 年 5 月）： 这是来自 Google 的关于网络推送通知的全面且编写良好的文档。

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

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

答： Google 已于 2018 年 4 月弃用 GCM。您现在可以使用Firebase Cloud Messaging (FCM)。这支持所有平台，包括网络浏览器。

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

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

查看Google 的这个 codelab以更好地理解实现。

一些教程：

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

进一步阅读： - - 来自 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

于 2015-11-28T22:03:09.437 回答
26

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

我的建议：window.postMessage在我们等待残障浏览器赶上的时候，否则Worker.postMessage()仍然使用 Web Workers 操作。

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

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

if (!("Notification" in window) || (Notification.permission === "denied") ) {
    // use (window||Worker).postMessage() fallback ...
}
于 2015-11-21T03:23:52.707 回答
14

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

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

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

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

于 2015-11-23T22:47:40.713 回答
12

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

Push.create("Hello world!", {
body: "How's it hangin'?",
icon: '/icon.png',
timeout: 4000,
onClick: function () {
    window.focus();
    this.close();
 }
});
于 2018-04-23T09:37:07.370 回答
11

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

我想你可能正在寻找Notification：

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

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

于 2015-11-17T15:56:45.353 回答
9

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

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

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

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

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

披露：我是 Pushpad 创始人

于 2016-03-21T11:02:16.710 回答
7

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

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

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

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

于 2016-12-08T03:28:41.900 回答
5

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

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

  1. 您需要客户端脚本代码，即服务工作者，参考（谷歌推送通知）。虽然这对于其他浏览器保持不变。

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

其他浏览器请谷歌...

于 2016-10-17T07:29:14.553 回答
1

我建议使用pubnub。但是，我尝试从浏览器中使用 ServiceWorkers 和 PushNotification，但是当我尝试它时，webviews 不支持这一点。

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

于 2017-05-23T12:58:28.967 回答