HTML 5的消息通知机制

百变鹏仔 2个月前 (10-18) #H5教程

文章标签机制

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 NotificationHTML 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 Notificationfunction createNotification(type){   if(type ==  &#39;&#39;)     type = &#39;normal&#39;;                         if(type != &#39;html&#39;)   {    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(&#39;content.html&#39;);   }   notification.show();}// Binding the Click event on buttons.$(document).ready(function (){          if (window.webkitNotifications)  {   window.Notifications = window.webkitNotifications;   $(&#39;#show_notification&#39;).click(function ()   {     if (window.Notifications.checkPermission() == 0)     {       createNotification(&#39;normal&#39;);     }     else     {       window.Notifications.requestPermission();     }   });                                 $(&#39;#show_html_notification&#39;).click(function ()   {    if (window.Notifications.checkPermission() == 0)    {       createNotification(&#39;html&#39;);    }    else    {       window.Notifications.requestPermission();    }   });  }      else  {   alert(&#39;HTML 5 Notifications are not supported on this browser/OS.&#39;);  }});

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

文章推荐

HTML 5的消息通知机制

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集