如何实现跨浏览器的推送通知?

时间:2022-04-17 19:54:14

I have a web application and I need the user to be able to see wether a notification for them has landed. I want the notification icon to change it's state when they have a new one.

我有一个web应用程序,我需要用户能够看到他们的通知是否已经到达。我想要通知图标在他们有一个新的时候改变它的状态。

Basically, I want to listen when the API endpoint updates it's state for the current user and the front end to change it's state.

基本上,当API端点更新当前用户的状态时,我希望监听它,前端更改它的状态。

I thought of make that endpoint as an observable and the front end as an observer, but I don't know if that fits in what I need.

我想让端点成为可观察的端点而前端作为观察者,但我不知道这是否符合我的需要。

Any ideas?

什么好主意吗?

1 个解决方案

#1


2  

I'd suggest to use a web socket implementation, such as Socket.io.

我建议使用web socket实现,比如socket .io。

Although there are many alternatives to Socket.io, its major advantage is that it provides multiple fallbacks for older browsers. So, e.g. if web sockets are not available or do not work, it tries AJAX long polling. This way you can even support browsers that were created at a time, when nobody even knew what web sockets are - but to you, the API stays the same.

尽管套接字有许多替代方案。io,它的主要优点是它为旧浏览器提供了多个回退。因此,例如,如果web套接字不可用或不能工作,它将尝试AJAX长轮询。这样,您甚至可以支持当时创建的浏览器,那时甚至没有人知道web套接字是什么——但是对您来说,API保持不变。

If you know that you only have to deal with modern browsers, you may use a more lightweight alternative instead, e.g. ws.

如果您知道您只需要处理现代浏览器,您可以使用更轻量级的替代方案,例如ws。

If you are looking for something completely different, which is purely based on HTTP and does not require an additional protocol, you might be interested in HTML5 Server-sent events. They work great, but in contrast to web sockets they are not bidirectional, and they are currently not supported in IE and Edge. They also have some other disadvantages. For example, it's not possible to add custom headers to an SSE request.

如果您正在寻找完全不同的东西(完全基于HTTP且不需要附加协议),您可能会对HTML5 Server-sent事件感兴趣。它们工作得很好,但是与web套接字相比,它们不是双向的,而且它们目前在IE和Edge中不受支持。他们也有其他的缺点。例如,不可能在SSE请求中添加自定义标头。

With HTTP2 it's maybe questionable how much impact web sockets will still have in the future, especially if you take into account that things such as the Streams API are coming. Then, you could basically solve everything using pure HTTP, which has some advantages as well. But right now, the Streams API is not here, so let's wait and see…

使用HTTP2, web套接字在未来还会有多大的影响可能值得怀疑,尤其是如果考虑到流API之类的东西即将出现的话。然后,基本上可以使用纯HTTP解决所有问题,这也有一些优点。但是现在,Streams API不在这里,所以让我们拭目以待……

#1


2  

I'd suggest to use a web socket implementation, such as Socket.io.

我建议使用web socket实现,比如socket .io。

Although there are many alternatives to Socket.io, its major advantage is that it provides multiple fallbacks for older browsers. So, e.g. if web sockets are not available or do not work, it tries AJAX long polling. This way you can even support browsers that were created at a time, when nobody even knew what web sockets are - but to you, the API stays the same.

尽管套接字有许多替代方案。io,它的主要优点是它为旧浏览器提供了多个回退。因此,例如,如果web套接字不可用或不能工作,它将尝试AJAX长轮询。这样,您甚至可以支持当时创建的浏览器,那时甚至没有人知道web套接字是什么——但是对您来说,API保持不变。

If you know that you only have to deal with modern browsers, you may use a more lightweight alternative instead, e.g. ws.

如果您知道您只需要处理现代浏览器,您可以使用更轻量级的替代方案,例如ws。

If you are looking for something completely different, which is purely based on HTTP and does not require an additional protocol, you might be interested in HTML5 Server-sent events. They work great, but in contrast to web sockets they are not bidirectional, and they are currently not supported in IE and Edge. They also have some other disadvantages. For example, it's not possible to add custom headers to an SSE request.

如果您正在寻找完全不同的东西(完全基于HTTP且不需要附加协议),您可能会对HTML5 Server-sent事件感兴趣。它们工作得很好,但是与web套接字相比,它们不是双向的,而且它们目前在IE和Edge中不受支持。他们也有其他的缺点。例如,不可能在SSE请求中添加自定义标头。

With HTTP2 it's maybe questionable how much impact web sockets will still have in the future, especially if you take into account that things such as the Streams API are coming. Then, you could basically solve everything using pure HTTP, which has some advantages as well. But right now, the Streams API is not here, so let's wait and see…

使用HTTP2, web套接字在未来还会有多大的影响可能值得怀疑,尤其是如果考虑到流API之类的东西即将出现的话。然后,基本上可以使用纯HTTP解决所有问题,这也有一些优点。但是现在,Streams API不在这里,所以让我们拭目以待……