Message notification mechanism for HTML 5

Source: http://www.ido321.com/1130.html

Original: HTML 5 Notification

Message notification mechanism for HTML 5

Translator: Dwqs

HTML 5 has been applied to web development. As usual, the release of any new version of the software looks forward to some new features, which are no exception to HTML 5. In order to improve user interaction only through HTML, HTML 5 has provided a lot of new APIs.

Isn't it very interesting? and HTML 5 is already a great combination of CSS 3.

Therefore, I also began to write a series of HTML 5 API related articles to describe the use and functionality of the API, such as Geolocation, Notification, File, and so on, the first article is related to Notification API.

The first thing to realize is that HTML 5 features and APIs can only be used in browsers that support HTML 5, and if the browser doesn't support HTML 5, you can't use HTML 5 to implement any of the features in a Web page. Get to know the notification API now.

What is HTML message notification?

HTML message notification means that we can tell the user a certain event behavior, even when the user is on another tab in the browser. This notification is useful for events such as new Mail, new tweet, and so on.

How to use?

To use the Notification API, There are a few steps: First, to get permission to display notifications from users, to display notifications to users only when they are allowed. So first ask the user for permission instead of displaying the notification directly. And then

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

1. Normal/default Notification
2. HTML Notification

The last execution of the notification code.

I have created a JavaScript function that displays notifications, and note that the function is limited to this article because there are many ways to expand it according to everyone's needs.

Html:

<H2>Show Normal Notification</H2><Button class= "Btn btn-success" ID= "Show_notification">Normal Notification</Button>   <H2>Show HTML Notification</H2><Button class= "Btn btn-success" ID= "Show_html_notification">HTML Notification</Button>

Javascript

//Function to show NotificationfunctionCreatenotification (type) {if(Type = ="') type =' normal ';if(Type! =' HTML ')   {vartitle ="You have received HTML 5 Notification";varmsg="Content Goes here ...";varnotification = window. Notifications.createnotification ("1.png", title, MSG); }Else{varnotification = 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 is not supported on this browser/os. '); }});

Demo View Demo:live Demo (PS: Open with Web Kit browser, this article is written in 2012.04) SummaryHTML 5 notification is for Web kit browsers like Google Chrome, and for HTML 5 Notification,mozilla Firefox has its own private properties. I'll cover it in other articles.

Next: Ajax Asynchronous request PHP data

Message notification mechanism for HTML 5