如何向网络浏览器发送推送通知？

Posted 2023-02-16

【中文标题】如何向网络浏览器发送推送通知？

【英文标题】：How to send push notification to web browser?

【发布时间】：2015-11-13 06:50:12

【问题描述】：

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

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

现在还不能理解的是：

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

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

【问题讨论】：

当然，您可以运行自己的后端，但它很复杂。

并不复杂。 browser-push 是一个完整的示例教程，介绍如何在没有第三方服务的情况下向浏览器发送推送通知。 lahiiru.github.io/browser-push

【参考方案1】：

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

更新（2018 年 5 月）： Here is a Google 提供的关于网络推送通知的全面且编写良好的文档。

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

我们能否使用 GCM/APNS 向所有 Web 浏览器发送推送通知 包括 Firefox 和 Safari？

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

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

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

查看来自 Google 的 this codelab 以更好地了解实施。

一些教程：

在 Django Here 中实现推送通知。 使用烧瓶发送推送通知Here & Here。 从 Nodejs Here 发送推送通知 使用 php Here & Here 发送推送通知 从 Wordpress 发送推送通知。 Here & Here 从 Drupal 发送推送通知。 Here

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

NodeJs. PHP Rails Python Go Lang - this 和 this

进一步阅读： - - 来自 Firefox 网站的文档可以是 read here。 - Google Web Push 的一个很好的概述可以是found here. - An FAQ answering 最常见的困惑和问题。

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

https://onesignal.com/（免费|支持所有平台） https://firebase.google.com/products/cloud-messaging/（免费） https://clevertap.com/（有免费套餐） https://goroost.com/

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

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

【讨论】：

只有 Push API 需要 HTTPS，Safari 不需要

onesignal，很好的信息：3

如果您不想支付 3rd 方库的费用，这里有一个您自己编写的开发人员指南。 cronj.com/blog/browser-push-notifications-using-javascript 。它还提到了当您不希望将主站点移动到 HTTPs 时如何处理。 （Node.js 和 JavaScript）。

这是我的完整指南和源代码。 lahiiru.github.io/browser-push

Onesignal 是免费的，但请注意它从您的用户那里获取了多少数据。使用前请阅读服务条款：onesignal.com/tos

【参考方案2】：

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

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

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

Notification has-feature 和 denied-permission 检查：

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

【参考方案3】：

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

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

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

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

【参考方案4】：

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

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

【参考方案5】：

GCM/APNS 仅适用于 Chrome 和 Safari。

我想你可能正在寻找Notification:

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

It works in Chrome, Firefox, Opera and Safari.

【参考方案6】：

我假设您说的是真正的推送通知，即使用户没有浏览您的网站（否则请查看 WebSockets 或长轮询等传统方法）。

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

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

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

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

披露：我是 Pushpad 创始人

【参考方案7】：

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

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

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

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

【参考方案8】：

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

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

您需要客户端脚本代码，即服务工作者，请参阅（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);

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

【参考方案9】：

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

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