如何在 HTML5 Web 应用程序中进行推送通知？

Question

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

Answer 1

您今天可以在 Chrome 中使用 Service Workers and PushManager from the W3C Push API 使用 Web 应用程序进行真正的推送通知。

请参阅文章 Push Notifications on the Open Web，了解分步操作方法和您可以使用的代码片段。这是那篇文章中的图表，解释了它周围的 UI 的样子。

还有一个implementation of the Push API has already landed in Firefox too; it’s targeted for shipping in November 2015 in Firefox 42. And Microsoft has indicated that the Push API is also under consideration for implementation in Edge team。

下面是一个简单的代码示例，借鉴自 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，为通知提供 "native" 样式；您还可以使用 SSE 或 WebSockets 等技术将通知从您的服务器推送到客户端
如果你想要站外推送通知（即使用户不在你的网站上也会发送）你应该结合使用 Service Workers 和 Push API 触发离线事件并使用通知 API 显示通知（参见 my answer）

如何在 HTML5 Web 应用程序中进行推送通知？

How can I do push notifications in an HTML5 Web application?

html

javascript

push-notification

web-push

push-api