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

Question

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

我想了解我们是否可以使用桌面通知实现对浏览器的推送通知，我相信这就是 Web 通知 API 所做的。我看到了一份 google 文档，介绍了如何为 Chrome here & here.

完成此操作

现在还不能理解的是：

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

相信所有这些一一解答，可以帮助很多有类似困惑的人。

Answer 1

GCM/APNS 仅适用于 Chrome 和 Safari。

我想你可能正在寻找 Notification:

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

It works in Chrome, Firefox, Opera and Safari.

Answer 2

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

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

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

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

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

Answer 3

您可以通过Server Side Events将数据从服务器推送到浏览器。这本质上是一个单向流，客户端可以 "subscribe" 来自浏览器。从这里开始，您可以在 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 的基础知识并提供了一些服务器代码示例。

Answer 4

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

Update (May 2022): Here is a doc on web push notification from Google.

See this detailed introduction to notification API from Mozilla.

Airships article on the topic and how web push & app push varies.

6年前原问题的回答：

Can we use GCM/APNS to send push notification to all Web Browsers including Firefox & Safari?

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

If not via GCM can we have our own back-end to do the same?

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

检查 Google 中的 this codelab 以更好地理解实现。

一些教程：

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

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

NodeJs.
PHP
Rails
Python
Go 语言 - this and 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/

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

除此之外，您需要有 HTTPS 才能发送推送通知。但是，您可以通过 letsencrypt.org

免费获取 https

Answer 5

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

Can we use GCM/APNS to send push notification to all Web Browsers including Firefox & Safari?

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

If not via GCM can we have our own back-end to do the same?

Push API 需要两个后端！一个由浏览器制造商提供，负责将通知传送到设备。另一个应该是你的（或者你可以使用像 Pushpad) and is responsible for triggering the notification and contacting the browser manufacturer's service (i.e. GCM, APNs, Mozilla push servers 这样的第三方服务）。

披露：我是Pushpad创始人

Answer 6

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

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

您需要客户端脚本代码，即 service worker，请参考（Google push notification）。尽管这对于其他浏览器仍然相同。

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

3.You 需要根据您的要求创建包含标题、消息、图标、单击 URL 字段的后端。现在点击发送通知后，调用函数 send_push()。例如，在此为不同的浏览器编写代码

3.1。 对于 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。 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

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

Can we have our own back-end to send push notification to Chrome, Firefox, Opera & Safari?

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

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

Answer 8

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

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

Answer 9

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

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

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

How to send push notification to web browser?

javascript

web-notifications

google-cloud-messaging

web-push

push-api

进一步阅读：