杂谈：HTML 5的消息通知机制

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

原文：HTML 5 Notification

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

译者：dwqs

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTA0Mzg0Mw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

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，有几个步骤：首先，要从用户那里获取显示通知的许可，仅仅有当用户同意时，才干显示通知给用户。

所以先要征求用户的许可而不是直接显示通知。然后，

获取用户许可之后。我们能够显示两种类型的信息：

1. Normal/Default Notification
2. HTML Notification

最后运行通知代码。

我已经创建了一个显示通知的JavaScript函数，注意：函数仅限用于这篇文章，由于有非常多种方式能够依照每一个人的需求去扩展。

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 Notification
function 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

 

           查看Demo： live demo （ps：用Web Kit浏览器打开，此文写于2012.04）

 

     总结

             HTML 5 notification适用于像Google Chrome一样的Web Kit浏览器，对于HTML 5 notification，Mozilla Firefox有其自己的私有属性。我将在其他文章中介绍。

下一篇：Ajax异步请求PHP数据