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. 数据库链接池c3p0的配置

    由于我看的是远古教程,所以里面各种驱动jar包还有c3p0包都是远古版本,对于最新版本的jdbc已经失去的作用,所以我在这里重写一下! 1.首先是c3p0的位置,package的外面,src的里面 2 ...

  2. CentOS 7 yum方式快速安装MongoDB

    一.安装环境及配置yum # more /etc/redhat-release CentOS Linux release 7.2.1511 (Core) # vi /etc/yum.repos.d/m ...

  3. golang map 读写锁与深度拷贝的坑

    0X01 golang中,map(字典)无法并发读写 简单来说,新建万条线程对同一个map又读又写,会报错. 为此,最好加锁,其实性能影响并不明显. type taskCache struct{ sy ...

  4. 工作笔记——使用Jest时遇到的一些问题

    最近公司想要从mocha+karma的前端单元测试方式转换到Jest,然后任务就分配给我了,好吧,在这之前连单元测试是什么都不知道.硬生生的开始写单元测试了,写这篇文章的初衷是因为在配置Jest的过程 ...

  5. 为什么Dotnet Core的DI默认是在控制器中注入

    转载请注明出处: https://www.cnblogs.com/zhiyong-ITNote/ DI的大概过程抽象成如下:接口对象 <-- 实现对象 <-- 抽象对象 在抽象对象中引入接 ...

  6. centos如何设置固定IP

    ### centos6.5版本 编辑ifcfg-eth0 vi /etc/sysconfig/network-scripts/ifcfg-eth0 参照下面代码修改自己的配置 ############ ...

  7. 图层 & 重排 & 重绘

    图层 浏览器在渲染一个页面时,会将页面分为很多个图层,图层有大有小,每个图层上有一个或多个节点 渲染 DOM 时 浏览器所做的: 获取 DOM 后分割为多个图层 对每个图层的节点计算样式结果 (Rec ...

  8. JS-原型的某些概念

    prototype:构造函数拥有一个对象,称为构造函数的原型属性,可以通过 构造函数prototype进行访问. __proto__: 构造函数所创造出的实例对象,可通过该属性访问原型对象. cons ...

  9. 一个bat病毒分析(part1)

    之前没学过bat,这里借分析顺便学一波,分析过程可能有点啰嗦 这里的@echo off关闭回显,病毒一般都是隐秘的执行的,然后setlocal enabledelayedexpansion是设置本地变 ...

  10. tomcat错误The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path

    在更换tomcat版本后,原来的项目文件中jsp会出现错误The superclass "javax.servlet.http.HttpServlet" was not found ...