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. thread - 传递引用参数

    当给 thread 的执行函数传递指针参数时,没有任何问题,但是如果想传递引用,按照普通函数的调用方法会遇到编译失败: #include <iostream> #include <t ...

  2. 网络编程-Python高级语法-深浅拷贝

    知识点:深浅拷贝,浅拷贝拷贝的是最顶层的东西,深拷贝是拷贝最深层的东西,光说可能理解不了,看下图 1.拷贝可变类型 2.拷贝不可变类型 3.拷贝元祖,元组内数据是可变类型

  3. coolSQL安装与使用

    由于笔者最近支援其他项目,所使用的数据库为informix 所以安装一个coolSQL客户端方便些,当然命令行方式也可以,但是感觉不太友好,下面把安装与简单使用过程分享给大家. 一.下载coolSQL ...

  4. 关于Function Language(函数式语言是什么?包含哪些语言?为什么函数式语言流行?)

    1.What? Function Language是一种非冯诺依曼式的程序设计语言.函数式语言的主要成分是原始函数.定义函数和函数型. 这种语言具有较强的组织数据结构的能力,可以把某一数据结构(如数组 ...

  5. 获取远程IP、字符串解析

    public class StringUtil { private static final Pattern IPV4_PATTERN = Pattern.compile( "^(25[0- ...

  6. 在Qt中配置TBB以及简单实用

    最近本人在写离线光线追踪渲染器,但是Qt::QtConcurrent的功能有限,所以就尝试使用了一下,顺便分享一些经验. TBB里面的parallel_for非常适合光线追踪渲染器,而QtConcur ...

  7. linux进阶指令

    1.df  查看磁盘空间  2.free   查看内存使用 -m 表示以mb位单位查看 total    总大小 used   使用过的空间 free 空闲的空间 shared 共享内存 buffer ...

  8. JavaScript浏览器解析原理

    首先,JavaScript的特点是: 1. 跨平台 可以再不同的操作系统上运行. 2. 弱类型 与之相对的是强类型 强类型:在定义变量的时候,需要将变量的数据类型表明.例如:Java 弱类型:定义变量 ...

  9. C++中的auto的使用

    需要改变迭代对象 for(auto &i:s) string s = "hello"; for (auto &i : s ) i = toupper(i); //改 ...

  10. 螺旋矩阵 java实现(待消化)

    import java.util.Scanner; /** * @author:(LiberHome) * @date:Created in 2019/3/4 17:13 * @description ...