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

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

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

我想你可能在寻找通知:

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

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

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

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

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

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

你需要客户端脚本代码，即service worker，参考(谷歌推送通知)。尽管这对其他浏览器来说是一样的。

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

3.您需要创建后端，其中有字段的标题，消息，图标，点击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);

其他浏览器请谷歌…

您可以通过服务器端事件将数据从服务器推送到浏览器。这本质上是一个单向流，客户端可以从浏览器“订阅”到它。从这里，你可以创建新的通知对象，作为se流到浏览器:

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

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

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

所以我在这里回答自己的问题。我的所有问题都得到了过去开发过推送通知服务的人的回答。

更新(2022年5月): 下面是谷歌网站发布的网页推送通知。 请参阅来自Mozilla的通知API的详细介绍。 关于网页推送和应用推送如何变化的文章。

6年前的问题:

我们可以使用GCM/APNS向所有Web浏览器发送推送通知吗 包括火狐和Safari?

答:谷歌已于2018年4月弃用GCM。您现在可以使用Firebase云消息传递(FCM)。它支持所有平台，包括web浏览器。

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

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

检查谷歌中的代码实验室以更好地理解实现。

一些教程:

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

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

NodeJs。 PHP Rails Python 走，朗，这个和这个

进一步阅读:

Firefox网站的文档可以在这里阅读。 在这里可以找到谷歌对Web Push的一个很好的概述。 一个常见问题解答最常见的困惑和问题。

有什么免费的服务吗? 有一些公司在免费、免费增值和付费模式中提供类似的解决方案。我列出了以下几个:

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

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

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