Question

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

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

现在仍然无法理解的是：

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

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

Answer 1

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

更新（2018年5月）： Here is a全面且写得非常好的关于Google推送通知的文档。

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

我们可以使用GCM / APNS向所有Web浏览器发送推送通知   包括Firefox＆amp;的Safari？

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

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

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

从Google查看this codelab以更好地了解实施情况。

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

NodeJs.
PHP
Rails
Python
Go Lang - this和this

进一步阅读：

Firefox网站上的文档可以是read here。
Google推文的非常好的概述可以是found here.
An FAQ answering最常见的混淆和问题。

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

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

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

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

Answer 2

Javier涵盖了通知和当前限制。

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

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

通知has-feature和拒绝权限检查：

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

Answer 3

GCM / APNS仅适用于Chrome和Safari。

我想你可能在寻找Notification：

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

It works in Chrome, Firefox, Opera and Safari

Answer 4

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

我们是否可以使用GCM / APNS向所有Web浏览器发送推送通知，包括Firefox＆amp;的Safari？

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

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

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

披露：我是Pushpad的创始人

Answer 5

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

我们是否可以使用自己的后端向Chrome，Firefox，Opera＆amp;的Safari？

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

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

Answer 6

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

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

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

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

3.您需要根据您的要求创建后端，其中包含标题，消息，图标，点击URL字段。现在点击发送通知后，调用一个函数说send_push（）。在这个针对不同浏览器的编写代码中，例如

3.1。 for chrome

 $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。 for 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 ...

Answer 7

这是为所有浏览器https://pushjs.org

执行推送通知的简单方法

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

Answer 8

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

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

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

8 个答案: