序：最近工作使用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. 用于PHP的Gearman Worker管理工具GearmanManager

    项目地址:https://github.com/brianlmoon/GearmanManager PHP环境要求 PHP 5.5.9 POSIX extension Process Control ...

  2. 一个完整的类用来生成RSACryptoServiceProvider单例类（.NET）

    internal class CcbRsaCryptProvider { private static RSACryptoServiceProvider _providerForSign; priva ...

  3. node.js图片上传

    1.node-formidable 对文件上传提供帮助的组件 2.app.js var formidable = require('formidable'); var http = require( ...

  4. Spring4学习笔记 - 配置Bean - 自动装配 关系 作用域 引用外部属性文件

    1 Autowire自动装配 1.1 使用:只需在<bean>中使用autowire元素 <bean id="student" class="com.k ...

  5. 一个ORM的实现（附源代码）

    1 前言 经过一段时间的编写,终于有出来一个稳定的版本,期间考虑了多种解决方案也偷偷学了下园子里面大神们的作品. 已经有很多的ORM框架,为什么要自己实现一个?我的原因是在遇到特殊需求时,可以在ORM ...

  6. 用node-webkit把web应用打包成桌面应用

    node-webkit是一个Chromium和node.js上的结合体,通过它我们可以把建立在chrome浏览器和node.js上的web应用打包成桌面应用,而且还可以跨平台的哦.很显然比起传统的桌面 ...

  7. Web数据持久化存储IndexedDB（不常用）

    IndexedDB是在浏览器中保存结构化数据的一种数据库,为了替换WebSQL(标准已废弃,但被广泛支持)而出现.IndexedDB使用NoSQL的形式来操作数据库,保存和读取是JavaScript对 ...

  8. JavaScript强化教程 -- cocosjs场景切换

    场景切换 在main.js,将StartScene作为我们初始化运行的场景,代码如下: cc.LoaderScene.preload(g_resources, function () { cc.dir ...

  9. 解决ReSharper自动删除换行

    使用Devexpress+ReSharper进行开发,似乎是C/S开发的最佳搭配. 但在ReSharper使用时,发现一个非常烦人的问题:即按F5进行调试时,自动删除换行,这样不仅把代码搞乱了,而且有 ...

  10. SharePoint Error - The SharePoint server was moved to a different location.

    错误 The SharePoint server was moved to a different location. ( Error from SharePoint site: HttpStatus ...