Request Quote

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

. . .

Comment

Add Your Comment

Be the first to comment.

css.php
Hire Us!
Brief us about your requirements and we'll get back to you.
Woo! Hooy!
We have just recieved your project brief and our expert will contact you shortly.
Send Again
Close