[Web Push] How to display web notifications (2024)

Hi @you asen ,

Not sure if I understood your question, but each notification is sent to a unique user/device.

To send a notification for a user, the user need first to subscribe on the device he is using; it is up to you how to get and store the subscription information (on the demo you have an example on how to subscribe - button "Create Subscription").

In order to show the notifications, the user needs to consent on gettings notifications from that system; it is another step you need to add somewhere on your application (you can see an example on the button Request Permission.

Hope this helps.

9 days ago

Hi @you asen ,

"you and your colleague have the demo opened on your browsers. so if you send an notification, is your colleague suppose to recieve the notification?"

With the demo implementation, the answer is NO. When you click "Push Notification" button on the demo, you are pushing a notification to that specific device. The demo is just a simple example of the component capabilities, you can use it to implement you own logic to push notifications to multiple devices.

"To send a notification for a user, the user need first to subscribe on the device he is using.
=> I have no idea how to do it with this component. "

This is done on the demo by clicking on the button "Create Subscription". You need to see what is done on this button, get the subscription information that is returned by the subscription method (shown on the demo on User Subscription field), and stores this information to use the way you want to. This information is used to push the notifications latter.

"what I'm looking for is, when I click on the push notification button, all the users who open the app with thier browser should should see the notification. "

Is it possible to do something similar on what you just described, but you need to create all the logic to support it. As I mentioned, not "all users who open the app will receive the notification", but all users that have subscribed to will receive... You can implement something that runs the subscription silently when the user opens the application for example, so, you will have the users subscribed. Another point is that you need to send one message for each subscription, so when sending the notifications you would need to iterate over all users subscriptions to push a message to each of them.

I recommend you to take a look on how push notification works first, to confirm that this is what you are looking for - maybe a more simple in-app notification can be enough. After that, take a look on some vendors that implements it for you (some features are not free, so, analyse it carefully), such as Firebase and OneSignal. Tools like these offers some capabilities that reduces the amount of development on your side - and for this you will probably pay for use it - while this component use pure web native methods, so it is free to use, but you need to implement all the logic and resources around it.

Hope this helps.

Let me know if you have more questions.

8 days ago