Friday 22 December 2017

Desktop Notifications Feature in HTML5

HTML5 provides desktop notifications feature that allows websites to send notifications to your desktop. In this section we learn to create a Web page named desktopnotification.html
That sends desktop notification. Here we need to run this Web page from Internet Information Services (IIS) Server.  We need to copy the desktopnotification.html file in the inetput/wwwroot folder.

////desktopnotification.html ////
<!doctype html>
<head>
<title>Desktop Notification in HTML5 </title>
<SCRIPT>
function RequestPermission (callback) {
window.webkitNotifications.requestPermission(callback);
}
function add() {
if(window.webkitNotifications.checkPermission()>0){
RequestPermission(add);
}
else{
var num1=perseInt(document.getElementById('num1').value);
var num2=perseInt(document.getElementById('num2').value); 
var num3=num1+num2;
window.webkitNotifications.createNotification("","Sum of "+num1+"  and "+num2+" is", num3). show() ;


</SCRIPT>
</head>
<body>
<h1> Here we create notification example of HTML5 </h1>
number 1:<input type="text" id="num1" value=""><br>
number 2:<input type="text" id="num2" value=""><br>
<button onclick="add() ">add</button>
</body>
</html>


Here we have created a form to accept two numbers and display the addition of numbers in a desktop notification message box. When you enter numbers in the provided fields and click the add button the add() method is called. The add() method checks whether or not your desktop provides the required permission to the Web page to send notification by using the checkPermission() method. If permission is not given it  calls the requestPermission() method to take permission and calls the add() method again Now the add() method uses the createNotification() method to display the sum of the numbers that are entered by you in the provided field. 

"To display the Output of the desktopnotification.html file enter the http://localhost/desktopnotification.html URL in your browser and press the ENTER Key. " 

No comments:

Post a Comment