var NotificationHandler = {
isNotificationSupported: 'Notification' in window,
isPermissionGranted: function () {
return Notification.permission === 'granted';
},
requestPermission: function () {
if (!this.isNotificationSupported) {
console.log('当前浏览器不支持Notification API');
return;
}
Notification.requestPermission(function (status) {
var permission = Notification.permission;
});
},
showNotification: function (Title, ImgUrl, Content, Tag) {
if (!this.isNotificationSupported) {
console.log('当前浏览器不支持Notification API');
return;
}
if (!this.isPermissionGranted()) {
Notification.requestPermission(function (permission) {
// 如果用户同意,就可以向他们发送通知
if (permission === "granted") {
var n = new Notification(Title, {
icon: ImgUrl,
body: Content,
tag: Tag,
requireInteraction: true
});
n.onshow = function () {
};
//消息框被点击时被调用
//可以打开相关的视图,同时关闭该消息框等操作
n.onclick = function () {
alert(1);
//n.close();
};

//当有错误发生时会onerror函数会被调用
//如果没有granted授权,创建Notification对象实例时,也会执行onerror函数
n.onerror = function () {
//do something useful
};

//一个消息框关闭时onclose函数会被调用
n.onclose = function () {
stopSound();
UpdateIsRead(n.tag);
};
}
});

} else {
var n = new Notification(Title, {
icon: ImgUrl,
body: Content,
tag: Tag,
requireInteraction:true//设置为true 那么关闭就只有是用户来关闭  这样就可以保证是用户操作 (缺点  必须要用户去操作一次)
});
n.onshow = function () {
};
//消息框被点击时被调用
//可以打开相关的视图,同时关闭该消息框等操作
n.onclick = function () {
//alert(1);
//n.close();
};

//当有错误发生时会onerror函数会被调用
//如果没有granted授权,创建Notification对象实例时,也会执行onerror函数
n.onerror = function () {
//do something useful
};

//一个消息框关闭时onclose函数会被调用
n.onclose = function () {
stopSound();
UpdateIsRead(n.tag);
};
}

}
};

Notification web 桌面消息推送的更多相关文章

  1. 【Html5】Html5新特性Notification实现桌面消息推送(2016-05-25)

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

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

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

  3. SSE(Server-sent events)技术在web端消息推送和实时聊天中的使用

    最近在公司闲着没事研究了几天,终于搞定了SSE从理论到实际应用,中间还是有一些坑的. 1.SSE简介 SSE(Server-sent events)翻译过来为:服务器发送事件.是基于http协议,和W ...

  4. 我有 7种 实现web实时消息推送的方案,7种!

    技术交流,公众号:程序员小富 大家好,我是小富- 我有一个朋友- 做了一个小破站,现在要实现一个站内信web消息推送的功能,对,就是下图这个小红点,一个很常用的功能. 不过他还没想好用什么方式做,这里 ...

  5. VDN For PB Web实现消息推送

    利用VesnData.Net(VDN)的互联网数据驱动功能我们实现了PB连接互联网数据库的功能.在互联网开发的过程中我们往往有些消息或者数据希望即时能够通知到各个客户端,现在比较流行的一种技术就是消息 ...

  6. Notification 浏览器的消息推送

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

  7. web消息推送-goesay

    原文:http://www.upwqy.com/details/22.html 1 GoEasy简介: GoEasy - Web实时消息推送服务专家 最简单的方式将消息从服务器端推送至客户端 最简单的 ...

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

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

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

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

随机推荐

  1. html 转 PDF wkhtmltopdf image 不能显示的问题

    把src的路径修改为本地路径 就可以,如 <img src="file:///C:\a.jpg">

  2. Redis数据结构之quicklist

    本文及后续文章,Redis版本均是v3.2.8 我们在使用Redis对外暴露的list数据结构时,给我们带来极大的便利性.其底层实现所依赖的内部数据结构就是quicklist. 我们先来回忆下list ...

  3. sql语法总结

    1.创建表 . 创建时间 default current_imestamp(6) 更新时间 default current_timestamp(6)  on update current_timest ...

  4. yum和rpm

    rpm简介 这是一个数据库管理工具,可以通过读取数据库,判断软件是否已经安装,如果已经安装可以读取出来所有文件的所在位置等,并可以实现删除这些文件. rpm:RPM is Redhat Package ...

  5. vscode断点调试本地客户端文件

    一.安装chrome,安装vscode,打开vscode编辑器,安装插件Debugger for Chrome 二.新建文件 1.目录结构 . ├── index.html ├── index.js ...

  6. linux抓包工具tcpdump使用总结

    tcpdump采用命令行方式对接口的数据包进行筛选抓取,其丰富特性表现在灵活的表达式上 1.格式 # tcpdump --help tcpdump version 4.1-PRE-CVS_2012_0 ...

  7. URL 链接中 井号#、问号?、连接符& 分别有什么作用?

    在一个 URL 中可以包含很多的内容,其中不仅仅是包含 26 个英文字母,10 个罗马数字,中文汉字,还可以拥有井号“#”.问号“?”.连接符“&”等三种最常见的符号,那么这些符号在网站中都有 ...

  8. Hibernate Session对象核心方法

    1. 持久化对象的状态: 站在持久化的角度,Hibernate 把对象分为四种状态:持久化状态,临时状态,游离状态,删除状态 Session 的特定方法能使对象从一个状态转到另一个状态 临时对象: 在 ...

  9. (71)Wangdao.com第十一天_JavaScript 数学对象 Math

    Math 对象 封装了数学相关的 属性和方法. 和其他对象不一样,Math 不是一个构造函数,所以不能 new 生成实例, 其所有属性和方法都必须在 Math 对象上调用. 静态属性 Math.PI ...

  10. mapState ,mapGetters ,mapMutations,mapActions

    参考 http://www.imooc.com/article/14741