DEV Community

Cover image for How to add In-App notifications to any web app!

How to add In-App notifications to any web app!

Sumit Saurabh on May 09, 2023

TL;DR In this article, you'll learn how to add a notification system to any app in just a few simple steps! The primary focus in making ...
Collapse
 
clericcoder profile image
Abdulsalaam Noibi

Wow,what an amazing and well detailed article. I need to add a notification functionality on my blog project.

Collapse
 
sumitsaurabh927 profile image
Sumit Saurabh

Thanks, Abdulsalaam!

This could come-in really handy for you.

Do join our discord community if you get stuck anywhere! 🚀

Collapse
 
iamhectorsosa profile image
Hector Sosa

Incredibly detailed post! Great stuff! Definitely bookmarked! @sumit I've built a OSS tool for creating engaging screenshots with ease. Check it out and let me know what you think! Cheers!

github.com/ekqt/screenshot

Collapse
 
sumitsaurabh927 profile image
Sumit Saurabh

Thanks for those kind words, will check out what you’ve built for sure! 🚀

Collapse
 
aim profile image
Aim23

Looking great. As it has web component integration I would be able to use this in my VBasic Webapplication.
What I'm curious about is, how to integrate such notifications by differentiate by logged in users who are eligible to receive a certain notification which is meant for this user.
Are there any tutorials out?
All the best and thanks again for the fish!

Collapse
 
nevodavid profile image
Nevo David

Great stuff Sumit!
Thank you for that

Collapse
 
sumitsaurabh927 profile image
Sumit Saurabh

Thank you for going through my article, Nevo! 😊

Collapse
 
solowon27 profile image
solowon27

Simple and brilliant 👌

Collapse
 
sumitsaurabh927 profile image
Sumit Saurabh

That’s what I was aiming for!

Thanks for going through it, Solowon

Collapse
 
arosebine profile image
Arowolo Ebine

Great!!! Cool, it was really details and easy to understand.

Thanks bro

Collapse
 
sumitsaurabh927 profile image
Sumit Saurabh

Thank you for reading the article, Arowolo!

We put new articles every 10 days or so, make sure you follow us to not miss out on them.

Collapse
 
zilvester profile image
zilvester

Works on iOS? Probably no as apple hates webapps because they dodge the app store and big apple can't profit..

Collapse
 
zilvester profile image
zilvester

But seriously Sumit, you have made a great how-to, and thanks... but does it work on iOS? What about the VAPID key and all that? Cheers

Collapse
 
sumitsaurabh927 profile image
Sumit Saurabh

Thanks for your generous words! Really appreciate it and sorry for replying this late, just saw it.

As for VAPID key, we don't currently support it out of the box the workaround it is that firebase supports VAPID key and if you're using firebase as a provider in Novu, it works!

If you want to use Novu in native ios apps, we do support it and you can get started here:
docs.novu.co/channels/push/apns/

Hope I was able to help and if you have any more questions, please drop them below. 😊

Collapse
 
sumitsaurabh927 profile image
Sumit Saurabh

You can still use Novu to send notifications using APN on ios devices

Collapse
 
zilvester profile image
zilvester

Sorry only just seen this 😵‍💫🫡

Collapse
 
obere4u profile image
Nwosa Tochukwu

Well detailed.. Thanks...

It will come in handy

Collapse
 
sumitsaurabh927 profile image
Sumit Saurabh

Glad you liked it, Nwosa!

Collapse
 
zaidmaker profile image
DevMirza

The steps are not well described and the code for front-end and back end not available too!

Collapse
 
sumitsaurabh927 profile image
Sumit Saurabh

What exactly was not clear in the steps Mirza? Can you point to something specific? I’d love to make it as clear as I can.

As for the code, it was my mistake, I’d mistakenly made the repositories private.

I’ve now made it public now, thanks for pointing it out.

You can also take a look at this link to go through more such projects in different technologies in addition to the one I’ve shared above:

github.com/novuhq/examples

Collapse
 
digitalagent profile image
usando

Very nice hope to use on projects... Thank you for sharing

Collapse
 
sumitsaurabh927 profile image
Sumit Saurabh

So happy to share it with you! I hope you use it in a project soon

Collapse
 
hamzagh97 profile image
Hamza Ghazouani • Edited

thank you so mush

Collapse
 
sumitsaurabh927 profile image
Sumit Saurabh

Thanks for reading!

Collapse
 
nazaroni profile image
Nazar

Just wow!
Cool article content + nice design with animation = 🤩 🤯 😍
Good job @sumitsaurabh927 !

Collapse
 
sumitsaurabh927 profile image
Sumit Saurabh

Thanks a lot for those generous words Nazar! 😊

Collapse
 
gopalece1986 profile image
gopalece1986

Wow nice

Collapse
 
sumitsaurabh927 profile image
Sumit Saurabh

Glad you liked it!

Collapse
 
rescenic profile image
Muhammad Ridwan Hakim

Thank you so much.

Collapse
 
sumitsaurabh927 profile image
Sumit Saurabh

Thank you so much! 😊

Collapse
 
khaybee24 profile image
khaybee24

Good one 👍

Collapse
 
erikna7 profile image
Erik-NA7

I built in-app real time notification using only socket.io, much simpler than this.

Collapse
 
sumitsaurabh927 profile image
Sumit Saurabh

Can you share a bit more? What features did you implement? What if I wanted email notifications or sms notifications or chat or in-app notifications? Can I do that easily using socket.io?