过去几个小时我一直在阅读有关Push Notification API和Web Notification API 的内容。我还发现谷歌和苹果分别通过 GCM 和 APNS 免费提供推送通知服务。
我试图了解我们是否可以使用桌面通知向浏览器实现推送通知，我认为这就是 Web Notification API 所做的。我在此处和此处看到了有关如何为 Chrome 完成此操作的 google 文档。
现在我仍然无法理解的是：
我相信所有这些在一个答案中的回答可以帮助很多有类似困惑的人。
所以在这里我回答我自己的问题。我从过去构建推送通知服务的人那里得到了对我所有疑问的答案。
回答 3 年前提出的原始问题：
- 我们可以使用 GCM/APNS 向包括 Firefox 和 Safari 在内的所有 Web 浏览器发送推送通知吗？
答： 自 2018 年 4 月起，Google 已弃用 GCM。您现在可以使用Firebase Cloud Messaging (FCM)。这支持所有平台，包括网络浏览器。
- 如果不是通过 GCM，我们可以有自己的后端来做同样的事情吗？
答：是的，可以从我们自己的后端发送推送通知。所有主要浏览器都支持相同的功能。
检查来自 Google 的此代码实验室以更好地了解实现。
一些教程：
用各种编程语言实现自己的后端。：
进一步阅读： - - 可以在此处阅读来自 Firefox 网站的文档。- 可以在此处找到有关Google Web Push 的非常好的概述。 - 回答最常见的困惑和问题的常见问题解答。
是否有任何免费服务可以做同样的事情？ 有一些公司以免费、免费增值和付费模式提供类似的解决方案。我在下面列出了几个：
注意： 选择免费服务时，请记住阅读 TOS。免费服务通常通过为包括分析在内的各种目的收集用户数据来发挥作用。
除此之外，您需要使用 HTTPS 来发送推送通知。但是，您可以通过letsencrypt.org免费获取https
Javier 涵盖了通知和当前限制。
我的建议：window.postMessage当我们等待残障浏览器赶上时，否则Worker.postMessage()仍然使用 Web Workers。
这些可以是带有对话框消息显示处理程序的回退选项，用于当通知功能测试失败或权限被拒绝时。
通知具有功能和拒绝权限检查：
if (!("Notification" in window) || (Notification.permission === "denied") ) {
// use (window||Worker).postMessage() fallback ...
}
您可以通过服务器端事件将数据从服务器推送到浏览器。这本质上是一个单向流，客户端可以从浏览器“订阅”。从这里开始，您可以在NotificationSSE 流入浏览器时创建新对象：
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