序：最近工作使用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. 第三讲：WCF介绍（3）

    代码 https://yunpan.cn/cPns5DkGnRGNs   密码:3913   前面我们通过一个小的例子,大概了解的WCF. 这里我们补充下  EndPoint 配置  A,B,C  中 ...

  2. 一个十年java程序员的心得

    展望未来,总结过去10年的程序员生涯,给程序员小弟弟小妹妹们的一些总结性忠告 走过的路,回忆起来是那么曲折,把自己的一些心得体会分享给程序员兄弟姐妹们,虽然时代在变化,但是很可能你也会走我已经做过的1 ...

  3. [moka同学笔记]Yii2 数据操作Query Builder 2

    Query Builder $rows = (new \yii\db\Query()) ->select(['dyn_id', 'dyn_name']) ->from('zs_dynast ...

  4. Monkey测试1——Monkey的使用

    Monkey工具使用 一. 什么是Monkey Monkey是Android中的一个命令行工具,可以运行在模拟器里或实际设备中.它向系统发送伪随机的用户事件流(如按键输入.触摸屏输入.手势输入等),实 ...

  5. [翻译] Autofac 中注册的概念

    原文链接:http://docs.autofac.org/en/latest/register/registration.html 所谓注册组件,是指创建 ContainerBuilder 的实例,并 ...

  6. 关于jQuery里面的选择器

    一.JQuery选择器的概述 选择器是JQuery的根基,在JQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器. 二.选择器的优势 1.简洁的语法 2.支持CSS1.0到CSS3.0选 ...

  7. 硬连接与软连接,inode与links

    硬连接和软连接,第一感觉就像是window的快捷方式,实则不然 要说硬连接和软连接,那就必须了解inode和block以及分区了 EXT文件系统在创建分区的时候,就划分了两块区域,inode tabl ...

  8. 重新初始化 VS2010

    开始->所有程序->Microsoft Visual Stdio 2005->Visual Stdio Tools->Visual Stdio 2005 命令提示 这时会弹出一 ...

  9. Bootstrap源码分析之dropdown

    源码分析: Dropdowns.scss:下拉框模块 Javascripts/bootstrap/dropdown.js:实现下拉框响应 实现功能及原理: 下拉选项卡,默认不能实现显示选中项的功能 原 ...

  10. Boba.js – 用于 Google 统计分析 JavaScript 库

    Boba.js 是一个小的,易于扩展的 JavaScript 库,让谷歌分析(Google Analytics)的更灵活,更容易.它同时支持旧的 ga.js 库以及新的 analytics.js 库. ...