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

亦凉 2022-08-13 14:51 153阅读 0赞

译文来源：[http://www.ido321.com/1130.html][http_www.ido321.com_1130.html]

原文：[HTML 5 Notification][]

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

译者：dwqs

![Center][]

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][live demo] （ps：用Web Kit浏览器打开，此文写于2012.04）

总结

HTML 5 notification适用于像Google Chrome一样的Web Kit浏览器，对于HTML 5 notification，Mozilla Firefox有其自己的私有属性。我将在其它文章中介绍。  
  
  
     下一篇：[Ajax异步请求PHP数据 ][Ajax_PHP_]

[http_www.ido321.com_1130.html]: http://www.ido321.com/1130.html
[HTML 5 Notification]: http://www.xpertdeveloper.com/2012/04/html5-notification/
[Center]: /images/20220810/ded37b43995c407cb52a89c1118b7638.png
[live demo]: http://demo.xpertdeveloper.com/html5-notification/
[Ajax_PHP_]: http://www.ido321.com/1138.html