Javascript 如何在 HTML5 Web 应用程序中推送通知？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32501619/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I do push notifications in an HTML5 Web application?
提问by Vickrant
I have a web application. I want to use the HTML 5 inbuilt notifications API to do push notifications from the server when the user is on a particular page. Is it possible?
我有一个网络应用程序。当用户在特定页面上时，我想使用 HTML 5 内置通知 API 从服务器执行推送通知。是否可以？
采纳答案by sideshowbarker
You can do real push notifications with Web apps today in Chrome using Service Workersand PushManagerfrom the W3C Push API.
现在，您可以使用来自W3C Push API 的Service Workers和PushManager在 Chrome 中通过 Web 应用程序进行真正的推送通知。
See the article Push Notifications on the Open Webfor a step-by-step how-to and code snippets you can use. Here's a diagram from that article that explains what the UI around it looks like.
请参阅Open Web 上的推送通知一文，了解您可以使用的分步操作方法和代码片段。这是那篇文章中的一个图表，它解释了它周围的 UI 是什么样子。
An implementation of the Push API has already landed in Firefoxtoo; 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 teamas well.
Push API的实现也已经登陆 Firefox；它的目标是在 2015 年 11 月在 Firefox 42 中发布。微软表示，推送 API 也在考虑在 Edge 团队中实施。
Below is a simple code example, borrowed from MDN.
下面是一个简单的代码示例，借自 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);
}
);
}
);
回答by collimarco
It depends on what you want to achieve:
这取决于您想要实现的目标：
- if you want to display a push notifications to the user while is surfing your website you can use the Web Notifications API, to give the notification a "native" style; you may also use a technology like SSE or WebSockets to push the notification from your server to the client
- if you want off-site push notifications (that are delivered even when the user is not on your website) you should use a combination of Service Workers and Push APIto trigger the offline event and use the Notifications API to display the notification (see my answer)
- 如果您想在浏览您的网站时向用户显示推送通知，您可以使用Web Notifications API为通知提供“原生”样式；您还可以使用 SSE 或 WebSockets 等技术将通知从您的服务器推送到客户端
- 如果您想要异地推送通知（即使用户不在您的网站上也会发送），您应该使用 Service Workers 和Push API的组合来触发离线事件并使用 Notifications API 来显示通知（请参阅我的回答)
