序：最近工作使用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. 基于.Net Framework 4.0 Web API开发（2）：ASP.NET Web APIs 参数传递方式详解

    概述:  ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.调用API过程中参数的传递是必须的,本节就来谈谈 ...

  2. Android Volley框架的使用(2)

    3. 设置请求类型和参数 Volley默认的请求类型是GET,如果需要用POST,可以在构造函数中进行设置.设置参数可以通过重写getParams()方法来实现. private void postR ...

  3. BaseAdapter的getView()方法

    getView()是BaseAdapter的一个重要方法.为了研究getView()方法,使用了以下的类. // apk列表 class list_apk extends BaseAdapter{ p ...

  4. Git submodule 特性

    当你习惯了代码的 VCS 后,基本上是离不开的. 作为一个依赖多个子项目组成的项目,要实现直观的代码逻辑结构,可以考虑使用 Git submodule 特性. 当然,如果只是单独的依赖的话,用依赖管理 ...

  5. 简单理解——面向切面编程（AOP）

    在传统的编写业务逻辑处理代码时,我们通常会习惯性地做几件事情:日志记录.事务控制及权限控制等,然后才是编写核心的业务逻辑处理代码.当代码编写完成回头再看时,不禁发现,扬扬洒洒上百行代码中,真正用于核心 ...

  6. Gym 100703G---Game of numbers（DP）

    题目链接 http://vjudge.net/contest/132391#problem/G Description standard input/outputStatements — It' s ...

  7. 《高可用MySQL》2 – 单机版MySQL主从配置

    这里搭建的主从是最简单的单一主从复制(即一个Master和一个slave,没有任何的热机备份和多slave),该主从结构的基本拓扑图如下所示: 建立基本的主从复制可以总结为以下三个基本步骤: 配置ma ...

  8. http gzip 解压缩

    var sContentEncoding = httpRespone.Headers["Content-Encoding"]; if(sContentEncoding == &qu ...

  9. 带给你灵感：30个超棒的 SVG 动画展示【下篇】

    前端开发人员和设计师一般使用 CSS 来创建 HTML 元素动画.然而,由于 HTML 在创建图案,形状,和其他方面的局限性,它们自然的转向了 SVG,它提供了更多更有趣的能力.借助 SVG,我们有更 ...

  10. [deviceone开发]-UI组件的动画示例

    一.简介 自定义组件模版(头部,按钮,加减数量,加载,底部弹出,开关(文字/无文字),选项卡(2-4), radio)全部带自定义动画效果,需从组件商店中添加:do_Animator组件 二.效果图 ...