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

我一直在阅读关于推送通知API和Web通知API的几个小时。 我也发现Google和Apple分别通过GCM和APNS免费推送通知服务。

我试图了解，如果我们可以实现推送通知浏览器使用桌面通知，我相信是Web通知API所做的。 我看到一个谷歌文档，说明如何在这里和这里为Chrome做这件事。

现在还不能理解的是：

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

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

所以我在这里回答我自己的问题。 我已经得到了过去那些build立推送通知服务的人的所有查询的答案。

为了快速回答我问的两个问题。

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

答：目前 GCM只能用于Chrome和Android手机。 GCM的新版本是FCM（Firebase云消息传递），并增加了对所有平台的支持。 FCM支持所有浏览器都实现的网页推送协议 。 （ 常见问题 ）

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

答：是的，推送通知可以从我们自己的后端发送。 所有主stream浏览器都支持同样的技术。

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

  • 的NodeJS。
  • PHP
  • 轨道
  • python
  • 去郎

进一步阅读：

  • 可以在这里find一个非常好的谷歌网页推送的概述。
  • 常见问题回答最常见的困惑和问题。

有没有免费服务做同样的事情？ 有一些公司提供免费，免费和付费模式的类似解决scheme。 下面列出几个：

  1. https://onesignal.com/ （全免费|支持手机+浏览器）
  2. https://clevertap.com/ （有免费计划）
  3. https://goroost.com/
  4. https://firebase.google.com/products/cloud-messaging/ （免费）

除此之外，你需要有HTTPS发送推送通知。 希望这也能帮助别人。

Javier涵盖了通知和目前的限制。

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

这些可以是对话框消息显示处理程序的回退选项，用于通知functiontesting失败或权限被拒绝。

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

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

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

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

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

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

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

GCM / APNS仅适用于Chrome和Safari。

我想你可能正在寻找Notification ：

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

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

您可以通过服务器端事件将数据从服务器推送到浏览器。 这本质上是一个客户端可以从浏览器“订阅”的单向stream。 从这里，你可以创build新的Notification对象，因为SSEstream入浏览器： 

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

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

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

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

是。 到今天（2017/05） ，您可以使用相同的客户端和服务器端实现来处理Chrome，Firefox和Opera（无Safari）。 因为他们已经以相同的方式实现了网页推送通知。 这是W3C的Push API协议。 但Safari拥有自己的旧build筑。 所以我们必须分开维护Safari。

请参阅浏览器推送回购指南行来实现您的Web应用程序与您自己的后端的Web推送通知。 它用示例说明如何在没有任何第三方服务的情况下为您的Web应用程序添加Web推送通知支持。

截至目前GCM只适用于Chrome和Android。 同样的Firefox和其他浏览器有自己的API。

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

  1. 您需要客户端脚本代码，即服务人员，请参阅（ Google推送通知 ）。 虽然这对其他浏览器保持不变。

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

3.您需要创build后端，其中包含标题，消息，图标，点击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);

对于其他浏览器请谷歌…

我build议使用pubnub。 我尝试从浏览器使用ServiceWorkers和PushNotification，但是，当我尝试它的Webviews不支持这一点。

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

Interesting Posts