HTML 5 message notification mechanism_html/css_WEB-ITnose

Translation source: http://www.ido321.com/1130.html

Translation: HTML 5 message notification mechanism

Translator ：dwqs

HTML 5 has been applied to web development. As usual, any new version of software is released with some new features, and HTML 5 is no exception. In order to improve user interaction through HTML alone, HTML 5 has provided many new APIs.

Isn’t it very interesting? And HTML 5 has been integrated with CSS 3 very well.

Therefore, I also started to write a series of articles related to HTML 5 API to introduce the use and functions of API, such as Geolocation, Notification, File, etc. The first article is related to Notification API.

The first thing to realize is that the features and APIs of HTML 5 can only be used normally in browsers that support HTML 5. If the browser does not support HTML 5, you cannot use HTML 5 to implement any of them in the web page. Functional. Now let’s learn about the notification API.

What is HTML message notification?

HTML message notification means that we can tell the user a certain event behavior, even if the user is in another tab of the browser at this time. This notification is very useful for New Mail, New Tweet and other events.

How to use?

To use the Notification API, there are several steps: First, you need to obtain permission from the user to display notifications. Only when the user allows it, can the notification be displayed to the user. So ask the user for permission first instead of showing the notification directly. Then,

After obtaining user permission, we can display two types of information:

1. Normal/Default Notification
2. HTML Notification

Finally execute the notification code.

I have created a JavaScript function that displays the notification. NOTE: The function is limited to this article as there are many ways to extend it to suit everyone's needs.

HTML:

<h2 id="Show-Normal-Notification">Show Normal Notification</h2><button class="btn btn-success" id="show_notification">    Normal Notification</button>   <h2 id="Show-HTML-Notification">Show HTML Notification</h2><button class="btn btn-success" id="show_html_notification">    HTML Notification</button>

JavaScript

// Function to show Notificationfunction createNotification(type){   if(type ==  '')     type = 'normal';                         if(type != 'html')   {    var title ="You have received HTML 5 Notification";    var msg="Content Goes Here......";    var notification = window.Notifications.createNotification("1.png", title, msg);   }   else   {     var notification = window.Notifications.createHTMLNotification('content.html');   }   notification.show();}// Binding the Click event on buttons.$(document).ready(function (){          if (window.webkitNotifications)  {   window.Notifications = window.webkitNotifications;   $('#show_notification').click(function ()   {     if (window.Notifications.checkPermission() == 0)     {       createNotification('normal');     }     else     {       window.Notifications.requestPermission();     }   });                                 $('#show_html_notification').click(function ()   {    if (window.Notifications.checkPermission() == 0)    {       createNotification('html');    }    else    {       window.Notifications.requestPermission();    }   });  }      else  {   alert('HTML 5 Notifications are not supported on this browser/OS.');  }});

Demo

View Demo: live demo (ps: Open with Web Kit browser, this article was written in 2012.04)

Summary

HTML 5 notification is suitable for applications like Google Chrome Like Web Kit browsers, Mozilla Firefox has its own private properties for HTML 5 notifications. I will cover this in other articles.

Next article: Ajax asynchronous request for PHP data