Push Notification in React and Next.js app using Node.js
Dec 30, 2023
0
Push notification is a great way to keep your users engaged with your app. Server can send push notifications to the client even when the client is not active.
Having said that, let's learn how to implement push notification in React and Next.js app using Node.js.
How Push Notification Works in Web Apps?#
Push notifications in web apps involve a combination of browser APIs, service workers, and a server that can send push messages.
If the browser is offline, the message is queued until the browser comes online. Users can optin to receive these push notifications from a website. Subscribers will then get the notifications on both mobile and desktop browsers. This is why web push notifications are also called browser notifications.
What is Service Worker?#
service worker is a script that runs in the background of a web application, separate from the web page. It enables features like background sync, push notifications, and caching.
Service worker is important for push notification because it is the one that receives the push notification from the server and shows it to the user.
Registering Service Worker#
In order to register a service worker, we need to create a file called sw.js
in our public folder of Next.js or React app.
We implemented the push
event listener in the service worker. The push
event is fired when the server sends a push notification to the client.
Registering Service Worker in React and Next.js#
We need to register the service worker in our React and Next.js app. We will use the useEffect
hook to register the service worker.
We are registering the service worker in the useEffect
hook. We are checking if the serviceWorker
is available in the navigator
object. If it is available, we are registering the service worker.
Nested Comments in React using Recursion
Nested comments are a common feature in many applications. We will use recursion to create nested comments. Also, we will see how to render nested comments in React.
Read Full PostSending Push Notification from Server#
We will use the web-push library to send push notification from our Node.js server.
To send push notification using web-push, we need to create a VAPID key pair. We can create a VAPID key pair using the web-push
library.
You will get public and private key which we can store in our environment variable.
We setup the server using Express.js. We created two routes /subscribe
and /send-notification
.
In the /subscribe
route, we are storing the subscription object in the subscriptions
array. We will use this array to send push notification to all the subscribers. you can store the subscription object in the database as well.
In the /send-notification
route, we are sending the push notification to all the subscribers. We are using the webpush.sendNotification
method to send the push notification.
We are sending the push notification to all the subscribers using the Promise.all
method. You can send the push notification to a specific user by filtering the subscriptions
array.
Subscribing to Push Notification#
We need to subscribe to push notification in order to receive the push notification. We will use the serviceWorker
object to subscribe to push notification.
We are subscribing to push notification in the useEffect
hook. We are using the pushManager.subscribe
method to subscribe to push notification. Once user is subscribed to push notification, we are sending the subscription object to the server.
Sending Push Notification from Server#
now open Postman and send a post request to http://localhost:4000/send-notification route. You will receive the push notification in your browser.
Conclusion#
In this article, we learned how to implement push notification in React and Next.js app using Node.js. wae implemented a basic push notification system. You can extend this system to send push notification to a specific user or group of users.
That's it for this article. I hope you found it useful. If you have any questions or feedback, please share in comment section. I will be happy to answer them.
Comments (3)
Markdown is supported.*0
0
Jan 17, 2024
0
0
Jan 17, 2024
1
0
Jan 8, 2024