Image: Push Notifications vs Email
Time to bring out your weaponðŸ’» with some â˜•.
Before starting, make sure you are having node.js installed on your system. If you do not have
node.js, go to https://nodejs.org/en/ and download as per your
Steps to implement React Application
- Open your terminal/command-prompt and install â€˜create-react-app cli‘ globally using
command -> npm install create-react-app â€“g.
- Let us now create a new react project using command create-react-app
push-notification and this will create your boilerplate code automatically
- Move into the created directory with cd push-notification
- You can run the app using command npm start and that will open your application inside the web browser
- Let us now start writing some code. Open push-notification
directory inside any code editor of your choice and you will see a
bunch of code already there which was created by create-react-app command.
- To begin with, replace the line serviceWorker.unregister() with serviceWorker.register() in src/index.js
- By doing so, we are saying that we want to make use of something called as service workers
- Service Workers are the scripts that execute as a background process on a different thread to the browserâ€™s main thread
Service workers are used to implement PWA (Progressive Web App) features such as Push-Notifications, Caching, background synchronization etc.
- Let us now create a custom service worker file in the public folder and name it custom-sw.js
- You will also see a file called serviceWorker.js in the root directory which was created by
default using create-react-app command
- Open that file and you will see a bunch of code already there. Modify swUrl as given below:
You may have noticed that there was already a service-worker.js in swUrl. Yes, create-react-app already comes with a default service worker which is used only at the build time to cache our static assets
- If you want to customize the serice worker logic, then we need to write our separate service worker implementation. That is exactly we need to do in our case
- Now it is the time to write our code in custom-sw.js file. Open the file and add the following code.
In the above code, we are installing our service worker in the background and listening for a push event which will be pushed by our server at some point of time
If you want to execute some code when user presses or closes the notification. That can be done by adding following in custom-sw.js file:
- Open your App.js file and add the following code:
- Run your app again using npm start
- Click on Subscribe for Notifications button
- Check your log. Subscription object will look something like this:
- For this code to work properly, use this same subscription object in your node server index.js file
And, we are done. I know that was long. Wait what, you did not receive any notification? ðŸ˜³
Because we did not send any yetðŸ˜.
To test our notification, we will use Postman.
Hit the endpoint and we will get the notificationðŸ˜€
This is how we can implement Push Notifications in React.js and Node.js. Go ahead and implement this feature in your apps right away.
A small note ->
A small note -> To check if your browser supports the push api, go to
Bonus tip -> You can implement the push notifications with the same web-push package in Angular. Node server implementation will be the same. You just need to handle the client logic in Angular.