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

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

0x02：代码简单直接看吧

 <!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="Scripts/jquery-1.7.1.min.js"></script>
             <script src="Scripts/notification.js"></script>
         </body>
         </html>

notification.html

 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();
                 }
             });
         });

notification.js

 

【Html5】Html5新特性Notification实现桌面消息推送（2016-05-25）的更多相关文章

  1. Notification web 桌面消息推送

    var NotificationHandler = { isNotificationSupported: 'Notification' in window, isPermissionGranted: ...

  2. Socket.io+Notification实现浏览器消息推送

    前言 socket.io: 包含对websocket的封装,可实现服务端和客户端之前的通信.详情见官网(虽然是英文文档,但还是通俗易懂).Notification: Html5新特性,用于浏览器的桌面 ...

  3. Notification 浏览器的消息推送

    Notification 对象,存在于window上,可以生成一个通知对象以推送推送浏览器消息通知. 这玩意兼容性不咋地,实不实用看场景.对外用户的应用,自然是鸡肋功能,因为你无法知道用户使用的是哪家 ...

  4. APNS消息推送实现

    转自:http://blog.csdn.net/biaobiaoqi/article/details/8058503 一.消息推送原理: 在实现消息推送之前先提及几个于推送相关概念,如下图1-1: 1 ...

  5. IOS - 消息推送原理和实现

    一.消息推送原理: 在实现消息推送之前先提及几个于推送相关概念,如下图1-1: 1.Provider:就是为指定IOS设备应用程序提供Push的服务器,(如果IOS设备的应用程序是客户端的话,那么Pr ...

  6. iOS 消息推送原理及实现Demo

    一.消息推送原理: 在实现消息推送之前先提及几个于推送相关概念,如下图1-1: 1.Provider:就是为指定IOS设备应用程序提供Push的服务器,(如果IOS设备的应用程序是客户端的话,那么Pr ...

  7. iOS 消息推送原理

    一.消息推送原理: 在实现消息推送之前先提及几个于推送相关概念,如下图: 1. Provider:就是为指定IOS设备应用程序提供Push的服务器,(如果IOS设备的应用程序是客户端的话,那么Prov ...

  8. iOS 消息推送原理及实现总结

    在实现消息推送之前先提及几个于推送相关概念,如下图:1. Provider:就是为指定IOS设备应用程序提供Push的服务器,(如果IOS设备的应用程序是客户端的话,那么Provider可以理解为服务 ...

  9. iOS 消息推送原理及实现总结 分类： ios技术 2015-03-01 09:22 70人阅读 评论(0) 收藏

    在实现消息推送之前先提及几个于推送相关概念,如下图: 1. Provider:就是为指定IOS设备应用程序提供Push的服务器,(如果IOS设备的应用程序是客户端的话,那么Provider可以理解为服 ...

随机推荐

  1. Java ConcurrentModificationException异常原因和解决方法

    Java ConcurrentModificationException异常原因和解决方法 在前面一篇文章中提到,对Vector.ArrayList在迭代的时候如果同时对其进行修改就会抛出java.u ...

  2. CARP

    CARP :Common Access Redundancy Protocol共用地址冗余协议Common Access Redundancy Protocol,或简称 CARP 能够使多台主机共享同 ...

  3. python不用加号实现加法

    问题: Calculate the sum of two integers a and b, but you are not allowed to use the operator + and -.E ...

  4. Verilog学习笔记简单功能实现（七）...............接口设计（并行输入串行输出）

    利用状态机实现比较复杂的接口设计: 这是一个将并行数据转换为串行输出的变换器,利用双向总线输出.这是由EEPROM读写器的缩减得到的,首先对I2C总线特征介绍: I2C总线(inter integra ...

  5. [mysql] 查看mysql执行时间

    mysql的 profiling不是默认打开的 查看profiling是否找开 mysql> show variables like "%pro%"; +---------- ...

  6. # 关于Apache的25个初中级面试题

    注:本文从自己的Markdown博客复制出,除标题字体加粗.代码风格改变.图片重新上传外其余均为markdown语法. 标签(空格分隔): LAMP --- 原文:[关于Apache的25个初中级面试 ...

  7. 理解 OpenStack 高可用(HA) （6）: MySQL HA

    本系列会分析OpenStack 的高可用性(HA)概念和解决方案: (1)OpenStack 高可用方案概述 (2)Neutron L3 Agent HA - VRRP (虚拟路由冗余协议) (3)N ...

  8. Vue-router中文教程-Vue-router参考手册.CHM

    下载地址http://download.csdn.net/detail/shouce_ren/9689243 百度云下载地址

  9. 12款免费的响应式 WordPress 主题下载

    响应式和现代设计风格的多用途 WordPress 主题能够非常灵活的适应所有设备.而高级主题能够更轻松定制,您可以从主题选项中禁用/启用响应模式.多用途的响应式设计的主题是最适合杂志网站,博客网站,想 ...

  10. 定制Eclipse IDE之界面篇

    为什么要定制IDE?      在工作时候,当公司有了自己的框架,给自己开放人员用,甚至是可以卖的时候,我们可以做成一个产品,而这个产品将包括框架本身.文档.工具.教程等等.工具之中最重要的莫过于开发 ...