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
 
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
 
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
 
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
 
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
 
khaybee24 profile image
khaybee24 •

Good one 👍

Collapse
 
rescenic profile image
Muhammad Ridwan Hakim •

Thank you so much.

Collapse
 
sumitsaurabh927 profile image
Sumit Saurabh •

Thank you so much! 😊

Collapse
 
gopalece1986 profile image
gopalece1986 •

Wow nice

Collapse
 
sumitsaurabh927 profile image
Sumit Saurabh •

Glad you liked it!

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
 
hamzagh97 profile image
Hamza Ghazouani • • Edited

thank you so mush

Collapse
 
sumitsaurabh927 profile image
Sumit Saurabh •

Thanks for reading!

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
 
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
 
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
 
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?