Notification web 桌面消息推送
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 桌面消息推送的更多相关文章
- 【Html5】Html5新特性Notification实现桌面消息推送(2016-05-25)
序:最近工作使用WorkTile,发现使用Chrome浏览器的时候如果有任务下发给我则会在桌面右下角提示(当前浏览器为最小化模式).感觉这个东西蛮有意思的,感觉可以给用户更好的体验,于是乎就查询了一下 ...
- Socket.io+Notification实现浏览器消息推送
前言 socket.io: 包含对websocket的封装,可实现服务端和客户端之前的通信.详情见官网(虽然是英文文档,但还是通俗易懂).Notification: Html5新特性,用于浏览器的桌面 ...
- SSE(Server-sent events)技术在web端消息推送和实时聊天中的使用
最近在公司闲着没事研究了几天,终于搞定了SSE从理论到实际应用,中间还是有一些坑的. 1.SSE简介 SSE(Server-sent events)翻译过来为:服务器发送事件.是基于http协议,和W ...
- 我有 7种 实现web实时消息推送的方案,7种!
技术交流,公众号:程序员小富 大家好,我是小富- 我有一个朋友- 做了一个小破站,现在要实现一个站内信web消息推送的功能,对,就是下图这个小红点,一个很常用的功能. 不过他还没想好用什么方式做,这里 ...
- VDN For PB Web实现消息推送
利用VesnData.Net(VDN)的互联网数据驱动功能我们实现了PB连接互联网数据库的功能.在互联网开发的过程中我们往往有些消息或者数据希望即时能够通知到各个客户端,现在比较流行的一种技术就是消息 ...
- Notification 浏览器的消息推送
Notification 对象,存在于window上,可以生成一个通知对象以推送推送浏览器消息通知. 这玩意兼容性不咋地,实不实用看场景.对外用户的应用,自然是鸡肋功能,因为你无法知道用户使用的是哪家 ...
- web消息推送-goesay
原文:http://www.upwqy.com/details/22.html 1 GoEasy简介: GoEasy - Web实时消息推送服务专家 最简单的方式将消息从服务器端推送至客户端 最简单的 ...
- IOS - 消息推送原理和实现
一.消息推送原理: 在实现消息推送之前先提及几个于推送相关概念,如下图1-1: 1.Provider:就是为指定IOS设备应用程序提供Push的服务器,(如果IOS设备的应用程序是客户端的话,那么Pr ...
- iOS 消息推送原理及实现Demo
一.消息推送原理: 在实现消息推送之前先提及几个于推送相关概念,如下图1-1: 1.Provider:就是为指定IOS设备应用程序提供Push的服务器,(如果IOS设备的应用程序是客户端的话,那么Pr ...
随机推荐
- influxDB+grafana安装配置及邮件告警发送配置
1. InfluxDB安装 下载包并解压: $:wgethttps://dl.influxdata.com/influxdb/releases/influxdb-1.3.6_linux_amd64.t ...
- Resharper 详细教程
前言 注:本文部分内容转载自:http://www.cnblogs.com/luminji/p/3285505.html 原文中部分快捷键在8.2版本中不适用,我已改正,并用红色标注出来 在线API: ...
- CentOS系统安全加固常见方法
关于Linux系统安全加固的具体实现脚本及基线检查规范,以供主机维护人员参考学习. 其中以下脚本主要实现的功能包括: *加固项包括:密码长度.session超时时间.删除不用的帐号和组.限制root用 ...
- SDOI2018:原题识别
题解: https://files.cnblogs.com/files/clrs97/old-solution.pdf Code: #include<cstdio> #include< ...
- rabbitmq应用
#!/usr/bin/env python3 # -*- coding: utf-8 -*- """ @author: zengchunyun ""& ...
- document.querySelectorAll() 兼容 IE6
不多说,直接上代码 // 使用 css 选择器获取元素对象 兼容性封装 Test Already. function getElementsByCss(cssStr){ if(document.que ...
- elasticsearch之分词插件使用
elasticsearch对英文会拆成单个单词,对中文会拆分成单个字.下面来看看是不是这样. 首先测试一下英文: GET /blog/_analyze { "text": &quo ...
- spring boot 开始部署报Whitelabel Error Page错解决方法
因为时刚刚才学spring boot ,第一次碰到的问题,花了半个小时终于明白了,SpringBoot 的application类会自动扫描子包类下的mapping方法,因此application类不 ...
- day27、28 二十八、项目:选课系统
选课系统 作业要求 角色:学校.学生.课程.讲师 要求: 1. 创建北京.上海 2 所学校 ----> 创建学校 2. 创建linux , python , go 3个课程 , linux\py ...
- laradock
配置xdebug:http://m.php.cn/article/407434.html