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

在过去的几个小时里，我一直在阅读有关推送通知API和Web通知API的文章。我还发现Google&苹果分别通过GCM和APNS免费提供推送通知服务。

我试图了解我们是否可以使用桌面通知实现对浏览器的推送通知，我相信这就是Web通知API所做的。我在谷歌上看到了一份关于Chrome如何做到这一点的文档；在这里

现在我仍然无法理解的是：

我们可以使用GCM/APNS向所有Web浏览器发送推送通知吗；Safari
如果不是通过GCM，我们能有自己的后端来做同样的事情吗

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

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

更新（2022年5月）：这是一份来自谷歌的网络推送通知文档。

请参阅Mozilla通知API的详细介绍。

飞艇文章的主题和如何网页推送&应用程序推送各不相同。

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

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

答案：截至2018年4月，谷歌已弃用GCM。您现在可以使用Firebase云消息（FCM）。这支持包括web浏览器在内的所有平台。

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

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

查看谷歌的这个代码实验室，以更好地了解实现。

一些教程：

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

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

NodeJs
PHP
轨道
Python
Go Lang——这个和这个

进一步阅读：

Firefox网站上的文档可以在这里阅读
一个非常好的概述的网络推送谷歌可以在这里找到
常见问题解答，回答最常见的困惑和问题

有免费的服务吗有些公司在免费、免费增值和付费模式中提供了类似的解决方案。我在下面列出了一些：

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

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

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

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

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

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

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

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

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

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

虽然有点过时，但Eric Bidelman的这篇文章解释了SSE的基本原理，并提供了一些服务器代码示例。

这是为所有浏览器执行推送通知的简单方法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。

我想你可能在找Notification:

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

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

我想你说的是真正的推送通知，即使用户没有浏览你的网站，也可以发送（否则请查看WebSockets或长轮询等遗留方法）。

我们可以使用GCM/APNS向所有Web浏览器发送推送通知吗；Safari？

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

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

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

披露：我是Pushpad创始人

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

我们是否可以拥有自己的后端来向Chrome、Firefox、Opera&Safari？

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

请参阅浏览器推送回购，了解如何通过自己的后端为您的网络应用程序实现网络推送通知的指导方针。它举例说明了如何在没有任何第三方服务的情况下为您的web应用程序添加web推送通知支持。

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

现在我们来讨论一下如何实现推送通知，使其适用于所有具有自己后端的常见浏览器。

您需要客户端脚本代码，即服务人员，请参阅（谷歌推送通知）。尽管这对于其他浏览器来说是一样的

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

3.你需要创建后端，根据你的要求，它有标题、消息、图标、点击URL等字段。现在，在单击sendnotification之后，调用一个函数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);

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

我建议使用pubnub。然而，我尝试从浏览器中使用ServiceWorkers和PushNotification，但当我尝试时，Web视图不支持这一点。

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

这里有一个完整的工作html示例
只需替换图像、文本，就可以了！

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="script.js"></script>
    <link rel="icon" href="favicon.ico" type="image/png">
    <title>Push</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  
  </head>
  <body>
    <div class="centrado">
    

<div class="card text-center shadow">
  <div class="card-header">
    Push Notifications 
  </div>
  <div class="card-body">
    <h5 class="card-title">Test for Push Notifications</h5>
    <p class="card-text">Click twice, first for the permission</p>
    <button class="btn btn-danger" id="btn-show-notification">Notify</button>
  </div>
  <div class="card-footer text-muted">
    aledc7
  </div>
</div>
</div>

  </body>

<script>
  $(document).ready(function () {
  $(document).on('DOMContentLoaded', function () {
    // Request desktop notifications permission on page load
    if (!Notification) {
      console.log('Notification is not compatible');
      return;
    }
    if (Notification.permission !== 'granted') {
      Notification.requestPermission();
    }
  });
  function showNotification() {
    if (Notification.permission !== 'granted') {
      Notification.requestPermission();
    } else {
      const options = {
        body: 'Your text for the Notification,
        dir: 'ltr',
        image: 'your_image.png' //must be 728x360px
      };
      const notification = new Notification('Title Notification', options);
      notification.onclick = function () {
        window.open('https://stackoverflow.com/users/10220740/ale-dc');
      };
    }
  }
  $('#btn-show-notification').on('click', showNotification);
});
</script>

<style>
  .centrado{
    /* Centrado Horizontal */
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    /* Centrado Vertical */
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);

}
.shadow{
  filter: drop-shadow(2px 4px 8px #585858);
}

</style>
</html>

进一步阅读：

相关内容

最新更新

热门标签：