Desktop Notification by Javascript/Jquery

Desktop Notification by Javascript/Jquery   – 

This is used to notify users outside the context of a web page. When we need show some real-time  information displaying to notifications on the Desktop, it generally refers to some static display area outside the web page, but that may take several forms, including:

• The area to Display users notification.
• An area within the chrome of the user agent.
• The home screen of a mobile device(For mobile user).

Notification Constructor –

Notification() constructor creates a new notification() object instance for represent user notification.

var myNotify = new Notification(title, options);

  title – Title of Notification

 options -Any custom settings that you want to apply to the notification message example-

var options = {
                body: 'Test notification message.', // body part of the notification
                dir: 'ltr', // use for derection of message
                image:'download.png' // use for show image

              }

  var n = new Notification('Title', options);

Note: It does not work on IP and Non-secure server(http), It work secure server(https) only.

Now we implement in the example —

function showNotification() {
  			if(window.Notification) {
  				Notification.requestPermission(function(status) {
  					console.log('Status: ', status); // show notification permission if permission granted then show otherwise message will not show
              var options = {
                  body: 'Test notification message.', // body part of the notification
                  dir: 'ltr', // use for direction of message
                  image:'download.png' // use for show image

                }

    					var n = new Notification('Title', options);
  				});
  			}
  			else {
  				alert('Your browser doesn\'t support notifications.');
  			}
  		}

Output —

In case you have any Query then feel free to ask in the comment section below. Happy coding!!