HTML 5的消息通知机制

   要使用Notification API，有几个步骤：首先，要从用户那里获取显示通知的许可，只有当用户允许时，才能显示通知给用户。所以先要征求用户的许可而不是直接显示通知。然后，
获取用户许可之后，我们可以显示两种类型的信息：
Normal/Default Notification
HTML Notification
最后执行通知代码。
我已经创建了一个显示通知的JavaScript函数，注意：函数仅限用于这篇文章，因为有很多种方式可以按照每个人的需求去扩展。
HTML：

1. <h2>Show Normal Notification</h2>
   
2. <button class="btn btn-success" id="show_notification">
   
3. Normal Notification
   
4. </button>
   
5. 
   
6. <h2>Show HTML Notification</h2>
   
7. <button class="btn btn-success" id="show_html_notification">
   
8. HTML Notification
   
9. </button>

复制代码

JavaScript

1. // Function to show Notification
   
2. function createNotification(type)
   
3. {
   
4.    if(type ==  '')
   
5.      type = 'normal';
   
6.                      
   
7.    if(type != 'html')
   
8.    {
   
9.     var title ="You have received HTML 5 Notification";
   
10.     var msg="Content Goes Here......";
    
11.     var notification = window.Notifications.createNotification("1.png", title, msg);
    
12.    }
    
13.    else
    
14.    {
    
15.      var notification = window.Notifications.createHTMLNotification('content.html');
    
16.    }
    
17.    notification.show();
    
18. }
    
19. 
    
20. // Binding the Click event on buttons.
    
21. 
    
22. $(document).ready(function ()
    
23. {        
    
24.   if (window.webkitNotifications)
    
25.   {
    
26.    window.Notifications = window.webkitNotifications;
    
27.    $('#show_notification').click(function ()
    
28.    {
    
29.      if (window.Notifications.checkPermission() == 0)
    
30.      {
    
31.        createNotification('normal');
    
32.      }
    
33.      else
    
34.      {
    
35.        window.Notifications.requestPermission();
    
36.      }
    
37.    });
    
38.                               
    
39.    $('#show_html_notification').click(function ()
    
40.    {
    
41.     if (window.Notifications.checkPermission() == 0)
    
42.     {
    
43.        createNotification('html');
    
44.     }
    
45.     else
    
46.     {
    
47.        window.Notifications.requestPermission();
    
48.     }
    
49.    });
    
50.   }   
    
51.   else
    
52.   {
    
53.    alert('HTML 5 Notifications are not supported on this browser/OS.');
    
54.   }
    
55. });

复制代码