Html5新特性Notification实现桌面消息推送 -

标题: Html5新特性Notification实现桌面消息推送 [打印本页]

作者: heicc 时间: 2016-6-13 14:11
标题: Html5新特性Notification实现桌面消息推送
   序：最近工作使用WorkTile，发现使用Chrome浏览器的时候如果有任务下发给我则会在桌面右下角提示（当前浏览器为最小化模式）。感觉这个东西蛮有意思的，感觉可以给用户更好的体验，于是乎就查询了一下，发现是Html5的新特性。

0x01：IE内核的浏览器还不可以，但在Chrome与Firefox上已经实现了此API。

0x02：代码简单直接看吧
       notification.html

      <!DOCTYPE html>
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Html5 桌面消息推送</title>
      </head>
      <body>
        <input type="button" id="btn_Send" value="发送桌面消息" />
        <input type="button" id="btn_Close" value="关闭桌面消息" />
        <script src="http://c.51hei.com/a/a/g/66136371059279.jpg"></script>
        <script src="http://c.51hei.com/a/a/g/66136371028045.jpg"></script>
      </body>
      </html>

      notification.js

      var notif;  // 消息对象
      var i = 0;
      $(document).ready(function () {
        /* 注册按钮单击事件 */
        $('#btn_Send').bind('click', function () {
              if (window.Notification) {  // 判断浏览器是否支持Notification特性，Chrome与Firefox支持，IE内核暂不支持
                 if (Notification.permission == 'granted') { // 判断浏览器是否允许此站点发送桌面消息；granted为允许
                      notif = new Notification('Clown：', {
                    body: '呆子、在吗？',
                          icon: 'http://taekwondoshow.com/Images/my_1.jpg',
                         tag: ++i // ID，如果ID重复则前者会被覆盖，如果ID不重复则一直叠加显示。PS：Chrome最多同时显示3条，Firefox则没有限制。。。
                      });


                  notif.onclose = function () { // 当Notification被关闭时触发
                          alert('消息被关闭了');
                      };
                  notif.onclick = function () { // 当Notification被单击时触发
                          alert('消息被单击了');
                      }
                 } else {
                      Notification.requestPermission();
                 }
              } else {
                alert('当前浏览器不支持Notification特性！');
              }
        });
        $('#btn_Close').bind('click', function () {
              if (notif) {
                 notif.close();
              }
        });
      });

欢迎光临 (http://www.51hei.com/bbs/)