如何在HTML5 Web应用程序中实现推送通知？

Question

我有一个网页应用程序。我想要使用HTML 5内置的通知API，在用户访问特定页面时从服务器进行推送通知。这种做法可行吗？

- Vickrant

Answer 1

您可以使用 Service Workers 和 PushManager 从 W3C Push API 在 Chrome 中立即进行 Web 应用程序的实际推送通知。

请参阅文章 在开放网络上进行推送通知，了解逐步操作指南和可用代码片段。这是来自该文章的一个解释 UI 的图表。

Firefox 已经 实现了 Push API，它计划在 2015 年 11 月发布 Firefox 42 版本。微软也已经 表示正在考虑将 Push API 实现到 Edge 团队中。

以下是从 MDN 借鉴的一个简单代码示例。

this.onpush = function(event) {
  console.log(event.data);
}

navigator.serviceWorker.register('serviceworker.js').then(
    function(serviceWorkerRegistration) {
        serviceWorkerRegistration.pushManager.subscribe().then(
            function(pushSubscription) {
                console.log(pushSubscription.subscriptionId);
                console.log(pushSubscription.endpoint);
            }, function(error) {
                console.log(error);
            }
        );
    }
);

- sideshowbarker

---

客户端很容易。那服务器端呢？那不是问题的核心吗？ - Pacerier

谷歌云消息传递（Firebase）方法只适用于Chrome浏览器还是也适用于Firefox浏览器？ - Vetterjack

@Vetterjack 我相信只有 Chrome 和 Android。 - A Friend

这里的教程提供了有关如何处理服务器端的信息：https://www.html5rocks.com/en/tutorials/websockets/basics/ 它涉及使用一种可以同时处理大量打开连接的技术。 - raphael75

您只显示了答案的一半。您忘记了服务器端。 - Black

Answer 2

这取决于你想要实现什么：

• 如果你想在用户浏览你的网站时向他们显示推送通知，可以使用Web Notifications API，使通知具有“本地”样式；你也可以使用SSE或WebSockets等技术将通知从服务器推送到客户端。
• 如果你想要离线推送通知（即在用户不在你的网站上时也能接收到通知），你应该使用Service Workers和Push API的组合来触发离线事件，并使用Notifications API来显示通知（请参见我的回答）。

- collimarco