zoukankan      html  css  js  c++  java
  • 杂谈:HTML 5的消息通知机制

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

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

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

    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数据


  • 相关阅读:
    通过web端启动关闭服务器程序以及检测程序运行状态
    Windows 自动监听程序,游戏服务器挂掉以后,自动监听程序将其重启起来
    自动监听程序,如果程序挂了,就重启
    删除log
    封装了一个C++类,当程序意外崩溃的时候可以生成dump文件,以便确定错误原因。
    贝塞尔曲线
    golang sql连接池 超时 数据库自动断开 ->127.0.0.1:3 306: wsarecv: An established connection was aborted by the software in your host machine.
    带控制的抢庄牛牛
    龙虎斗控制
    回归模型与房价预测
  • 原文地址:https://www.cnblogs.com/wzjhoutai/p/6807024.html
Copyright © 2011-2022 走看看