过去几个小时我一直在阅读推送通知API和Web通知API。我还发现谷歌和苹果分别通过GCM和APNS提供免费的推送通知服务。
我正在尝试了解我们是否可以使用桌面通知实现浏览器推送通知，我相信这是Web通知API所做的。我看到了一个谷歌文档关于如何为Chrome在这里和这里。
现在我还不明白的是:
我们是否可以使用GCM/APNS向包括Firefox和Safari在内的所有Web浏览器发送推送通知? 如果不通过GCM，我们可以有自己的后端来做同样的事情吗?
我相信所有这些答案都可以帮助很多有类似困惑的人。
GCM/APNS分别只适用于Chrome和Safari。
我想你可能在寻找通知:
https://developer.mozilla.org/en-US/docs/Web/API/notification
它适用于Chrome、Firefox、Opera和Safari。
Javier介绍了通知和当前的限制。
我的建议是:窗户。当我们等待缺陷浏览器赶上时，Worker.postMessage()仍在使用Web Workers操作。
这些可以是对话框消息显示处理程序的回退选项，用于通知功能测试失败或权限被拒绝时。
通知has-feature和denied-permission检查:
if (!("Notification" in window) || (Notification.permission === "denied") ) {
// use (window||Worker).postMessage() fallback ...
}
您可以通过服务器端事件将数据从服务器推送到浏览器。这本质上是一个单向流，客户端可以从浏览器“订阅”到它。从这里，你可以创建新的通知对象，作为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
我假设你说的是真正的推送通知，即使用户没有浏览你的网站(否则请检查WebSockets或传统方法，如长轮询)。
我们是否可以使用GCM/APNS向包括Firefox和Safari在内的所有Web浏览器发送推送通知?
GCM只适用于Chrome, apn只适用于Safari。每个浏览器制造商都提供自己的服务。
如果不通过GCM，我们可以有自己的后端来做同样的事情吗?
Push API需要两个后端!一个是由浏览器制造商提供的，负责向设备发送通知。另一个应该是你自己的(或者你可以使用像Pushpad这样的第三方服务)，负责触发通知和联系浏览器制造商的服务(即GCM、apn、Mozilla推送服务器)。
披露:我是Pushpad的创始人
到目前为止，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);
其他浏览器请谷歌…
我可以重新定义你的问题如下吗
我们可以有自己的后端发送推送通知Chrome, Firefox, Opera和Safari?
是的。到今天(2017/05)，您可以使用相同的客户端和服务器端实现来处理Chrome, Firefox和Opera(没有Safari)。因为他们以同样的方式实现了web推送通知。这是W3C的Push API协议。但是Safari有自己的旧架构。我们需要单独维护Safari。
参考browser-push repo指南线实现web推送通知你的web应用程序与你自己的后端。它通过示例解释了如何在没有任何第三方服务的情况下为您的web应用程序添加web推送通知支持。
我建议使用pubnub。我尝试使用ServiceWorkers和推送通知从浏览器，然而，当我尝试它的webview不支持这一点。
https://www.pubnub.com/docs/web-javascript/pubnub-javascript-sdk
这是一个简单的方法做推送通知所有浏览器https://pushjs.org
Push.create("Hello world!", {
body: "How's it hangin'?",
icon: '/icon.png',
timeout: 4000,
onClick: function () {
window.focus();
this.close();
}
});
这里有一个完整的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>
