Reading list Switch to dark mode

    Desktop Notification by Javascript/Jquery

    Updated 16 July 2021

    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

    Searching for an experienced
    Opencart Company ?
    Find out More

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

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    2 comments

  • R Schmidt
    • Dilip Kumar (Moderator)
  • Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home