HTML 5的消息通知机制-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

HTML 5的消息通知机制

PHP中文网

Mar 21, 2017 pm 04:41 PM

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 2	`Normal/Default Notification` `HTML Notification`

Copy after login

最后执行通知代码。

我已经创建了一个显示通知的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>

Copy after login

JavaScript：

// Function to show Notification
function 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;);
  }
});

Copy after login

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

以上就是HTML 5的消息通知机制的内容，更多相关内容请关注PHP中文网（www.php.cn）！

Redis消息通知系统的实现

web消息通知系统设计问题

基于HTML5 Notifications API的消息通知插件

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn