1#
译文来源:http://www.ido321.com/1130.html

原文:HTML 5 Notification

译文:HTML 5 的消息通知机制

译者:dwqs

     HTML 5 已经被应用到Web开发中。跟平常一样,任何一个软件新版本的发布都期待一些新的特性,这对HTML 5也不例外。为了仅仅通过HTML提高用户交互,HTML 5已经提供了很多新的API。

     是不是非常有趣呢?并且HTML 5已经和CSS 3结合的非常棒了。

     因此,我也开始写一系列与HTML 5的API相关的文章来介绍API的使用和功能,例如Geolocation, Notification, File, 等等,第一篇文章是和Notification API相关。

     首先要意识到是,HTML 5的特性和API仅能在支持HTML 5的浏览器中正常使用,如果浏览器不支持HTML 5,就不能使用HTML 5在网页中实现任何一个功能了。现在就来了解一下notification API吧。

     什么是HTML 消息通知?

     HTML消息通知是指我们可以告诉用户一个确定的事件行为,即使此时用户在浏览器的另一个选项卡。这个通知对于New Mail, New Tweet等事件是非常有用的。

     怎么使用?

   要使用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. <h2>Show HTML Notification</h2>
  6. <button class="btn btn-success" id="show_html_notification">
  7. HTML Notification
  8. </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. // Binding the Click event on buttons.

  20. $(document).ready(function ()
  21. {        
  22.   if (window.webkitNotifications)
  23.   {
  24.    window.Notifications = window.webkitNotifications;
  25.    $('#show_notification').click(function ()
  26.    {
  27.      if (window.Notifications.checkPermission() == 0)
  28.      {
  29.        createNotification('normal');
  30.      }
  31.      else
  32.      {
  33.        window.Notifications.requestPermission();
  34.      }
  35.    });
  36.                               
  37.    $('#show_html_notification').click(function ()
  38.    {
  39.     if (window.Notifications.checkPermission() == 0)
  40.     {
  41.        createNotification('html');
  42.     }
  43.     else
  44.     {
  45.        window.Notifications.requestPermission();
  46.     }
  47.    });
  48.   }    
  49.   else
  50.   {
  51.    alert('HTML 5 Notifications are not supported on this browser/OS.');
  52.   }
  53. });
复制代码