javascript - 如何在 HTML5 Web 应用程序中推送通知？

Question

我有一个网络应用程序。当用户在特定页面上时，我想使用 HTML 5 内置通知 API 从服务器推送通知。可能吗？

Answer 1

现在，您可以使用来自W3C Push API的Service Workers和PushManager在 Chrome 中使用 Web 应用程序进行真正的推送通知。

有关您可以使用的分步操作方法和代码片段，请参阅Open Web 上的推送通知一文。这是那篇文章中的一个图表，它解释了它周围的 UI 是什么样的。

Push API的实现也已经登陆 Firefox；它的目标是在 2015 年 11 月在 Firefox 42 中发布。微软表示，推送 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);
            }
        );
    }
);

Answer 2

这取决于您想要实现的目标：

• 如果您想在浏览您的网站时向用户显示推送通知，您可以使用Web Notifications API为通知提供“原生”样式；您还可以使用 SSE 或 WebSockets 等技术将通知从您的服务器推送到客户端
• 如果您想要异地推送通知（即使用户不在您的网站上也会发送），您应该使用 Service Worker 和Push API的组合来触发离线事件并使用 Notifications API 来显示通知（请参阅我的回答）