HTML5 Message notification mechanism-

HTML message notification means that we can tell the user a definite event behavior, even if the user is on another tab of the browser at this time. This notification is very useful for NewMail, NewTweet, and other events. Original article: HTML5Notification Translation: HTML5 Message notification mechanism translation ...,. HTML 5 has been applied to Web development. As usual, the release of any new software version is expected to have some new features, which is no exception to HTML 5. To improve user interaction only through HTML, HTML 5 has provided many new APIs.
Is it very interesting? In addition, HTML 5 has already been combined with CSS 3.
Therefore, I began to write a series of articles related to HTML 5 APIs to introduce the use and functions of APIS, such as Geolocation, Notification, File, and so on, the first article is related to the Notification API.
First, you must realize 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 function on the webpage. Now let's take a look at the notification API.
What is HTML message notification?
HTML message notification means that we can tell the user a definite event behavior, even if the user is on another tab of the browser at this time. This notification is very useful for New Mail, New Tweet, and other events.
How to use it?

There are several steps to use the Notification API: First, you need to obtain the permission to display notifications from the user. Only when the user permits the display can the Notification be displayed to the user. Therefore, you must first obtain the user's permission rather than directly display the notification. Then,

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

Normal/Default NotificationHTML Notification

Finally, execute the notification code.

I have created a JavaScript function that displays notifications. Note: The function is only used in this article, because there are many ways to scale according to your needs.

HTML:

Show Normal Notification    Normal Notification   Show HTML Notification    HTML Notification

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.');  }});

Summary
HTML 5 notification is applicable to Web Kit browsers like Google Chrome. For HTML 5 notification, Mozilla Firefox has its own private attributes. I will introduce it in other articles.

The above is the content of the message notification mechanism of HTML 5. For more information, see PHP Chinese website (www.php1.cn )!

Related Articles:

Implementation of the Redis Message notification system

Web Notification System Design Problems

Message notification plug-in based on HTML5 Notifications API