Show Desktop Notification in Javascript App

In this article, we will learn how to show desktop notification in javascript. we will attach an icon to our desktop notification and we will show this notification on our web server.
This notification will work only with HTTP /HTTPS URL, So here we need to create a small node server that will serve the js app into the browser using HTTP, then you can see the notification. The node server is only to show you the demo If you add notification logic into your web page and serve this web page through HTTP(S) then you no need to add node server.

So let’s start

Create a small JS app:

In this step, we will create a file “index.html” and in this file, we will write out notification logic, and we will write some HTML to show on the web browsers. Make a file index.html and write the below codes:

index.html:

Download an icon from google, and rename it to “demo2.jpg” or change the icon name in file index.html and keep in the root folder.

Create a Node Server:

Why we are creating a node server? we have discussed above.
Let’s create a file “server.js” in the “root” directory and write the below code:

In the above code, we created a node server and create an endpoint “/”. This endpoint will serve the js app. It will serve you the “index.html” file. Our node server will run on port “3000”, you can change the port as well.

Install the dependencies:
To run this server, we need to install the node dependencies, you can install it by running below command:

npm install express path

So, at last, our project directory will look like:

Run the server:

We’ve created our server, Its time to run our node server and see the result. To run our node server, we need to run below command:

node server.js

After the successful command run, you can see the below message on console:

server is runnig on port 3000
Open your browser and hit url 'localhost:3000'

It means, your node server is running and ready to serve your react app.

Now open browser and hit URL “localhost:3000” and you can see the result:

Show Desktop Notification in Javascript App

You can see the confirmation box first to ask permission, and then you can see the notification also if you click on the button “Click Here to show notification”, you can get the notification, and when you click on the notification, you will get the alert.

If you want to reset the permission for notification then click on (I) button in address bar nearby URL, and reset it to “ask (default)” as:

Show Desktop Notification in Javascript App

After this when you reload your app, it will ask you for permission.

Congratulation... Now can write the code to show the desktop notification in your js app.

Conclusion:

In this article we learned the following things:
* How to write the desktop notification?
* How desktop notification work?
* How to create a node server?
* How to serve an HTML page through node server.

To know about the desktop notification in details Click Here

Thank you for taking the time to read this article. If you like and you think this article will be helpful to someone then click the 👏🏻 icon so other people will see this here on Medium.