序：最近工作使用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. spring的事务操作

    我们项目一期已经差不多结束了,所以一些细节也被拿了出来,出现最多的就是事务的操作了.因为自己负责的是一个模块(因为是另外一个项目的负责人),所以组员经常会遇到事务的问题,会出现很多奇葩的用法,各种乱用 ...

  2. 框架Spring笔记系列 一 基础

    主题:Spring 1.什么样的问题,使得Spring框架应用而生?使用Spring解决了那些问题? 2.

  3. [moka同学笔记]Yii2.0显示页匿名函数设置$value

    匿名函数设置$value <?= GridView::widget([ 'dataProvider' => $dataProvider, 'columns' => [ // ['cl ...

  4. Java.io.DataInputStream.readInt()

    1. 代码 import java.io.DataInputStream; import java.io.IOException; public class Test { public static ...

  5. 快速熟悉Velocity

    果然公司用的东西跟平时学的东西不太一样,我们公司前台页面并不是我们熟悉的.html或者.jsp文件,而是很多人不知道的 .vm文件,其实只要我们理解了jsp文件,vm文件也就是一些基本语法不同而已. ...

  6. 高性能 Windows Socket 组件 HP-Socket v3.0.2 正式发布

    HP-Socket 是一套通用的高性能 Windows Socket 组件包,包含服务端组件(IOCP 模型)和客户端组件(Event Select 模型),广泛适用于 Windows 平台的 TCP ...

  7. CMS

    一.任务简介: 开发简单的CMS.在数据库中创建新闻数据库表news,包含(题目.作者.日期.正文等字段):创建HTML模板文件:读取数据库所有数据的信息,并使用新闻信息 替换模板文件中的占位符,从而 ...

  8. [Tool] Chrome内的本地网页，使用XMLHttpRequest读取本地档案

    [Tool] Chrome内的本地网页,使用XMLHttpRequest读取本地档案 问题情景 开发Cordova这类以网页内容作为UI的Hybrid APP时,开发人员可以使用IDE的功能将程序布署 ...

  9. MasonJS – 创建完美的砌体结构网页布局

    MasonJS 插件用来解决目前大多数的网格系统使用中的问题——间距.当使用 Masonry,Isotope 或任何其他网格插件时,布局中会出现空白或边缘参差不齐的情况.MasonJS 可以帮助你填补 ...

  10. Snabbt.js – 极简的 JavaScript 动画库

    Snabbt.js 是一个简约的 JavaScript 动画库.它会平移,旋转,缩放,倾斜和调整你的元素.通过矩阵乘法运算,变换等可以任何你想要的方式进行组合.最终的结果通过 CSS3 变换矩阵设置. ...