javascript-浏览器消息提醒
如何让用户在浏览器最小化的状态下也能及时的收到消息提醒呢? 这个问题作为webRd是要正面面对的. 大约可分两种场景:一种是类似桌面通知的形式还有一种是类似QQ提醒(在系统任务栏闪烁随后高亮);接下来分别研究下:
桌面提醒:
这个H5有个强大的API没错就是Notification, 没听过? https://developer.mozilla.org/en-US/docs/Web/API/notification 先去了解下,很详细;浏览器不同对其支持程度也不同,简单讲就是有兼容问题,而笔者要说的就是基于Notification的一款小类库 https://github.com/ttsvetko/HTML5-Desktop-Notifications,其支持:IE9+、Safari6、Firefox、Chrome;好吧都是前辈的结晶,我就是个搬砖的,下面附一个简单的小demo:
ps: 么有用类库, 就是练手用的..实际还是用类库吧;
function _Notification(title,option){
var Notification = window.Notification || window.mozNotification || window.webkitNotification;
Notification.permission === "granted"?creatNotification(title, option):requestPermission(title, option);
function creatNotification(title, option){
var instance = new Notification(title, option);
instance.onclick = function () {
console.log('onclick');
};
instance.onerror = function () {
console.log('onerror');
};
instance.onshow = function () {
console.log('onshow');
};
instance.onclose = function () {
console.log("close")
}
}
function requestPermission(title, option){
Notification.requestPermission(function(status) {
status === "granted"?creatNotification(title, option):failNotification(title);
});
}
function failNotification(title){
var timer;
return function(timer){
var index = 0;
clearInterval(timer);
timer = setInterval(function() {
if(index%2) {
document.head.getElementsByTagName("title")[0].innerHTML = '【 】'+ title;
}else {
document.head.getElementsByTagName("title")[0].innerHTML = '【新消息】'+ title;
}
index++;
if(index > 20) {
clearInterval(timer);
}
}, 500);
}(timer);
}
}
任务栏提醒:
这个还真是个问题; 至于解决的终极方法目前笔者还没研究明白;不过window.open 这种弹窗会触发闪烁提醒, 但需要解决用户禁止弹窗的情况,可以模拟from提交 || 超链接(a) || 利用浏览器冒泡;这几种方法都可以解决大部分被拦截的情况; 可这都不是笔者想要的;因为提示内容展示在弹窗中总是不好的,用户很容易蒙圈,怎么一有提示就多个标题栏呢...很烦,貌似内存溢出也可以,不过这个就算了,除非脑子进水了...; 期待大神指点..;
javascript-浏览器消息提醒的更多相关文章
- jquery 消息提醒插件 toastmessage
最近做系统,想到使用后台要使用消息提醒,但是一直苦恼消息提醒的效果,于是找了一个toastmessage,还不错.记录下使用的方法. 第一步:引入需要的文件 <script type=" ...
- [Asp.net 开发系列之SignalR篇]专题六:使用SignalR实现消息提醒
一.引言 前面一篇文章我介绍了如何使用SignalR实现图片的传输,然后对于即时通讯应用来说,消息提醒是必不可少的.现在很多网站的都有新消息的提醒功能.自然对于SignalR系列也少不了这个功能的实现 ...
- python 全栈开发,Day130(多玩具端的遥控功能, 简单的双向聊天,聊天记录存放数据库,消息提醒,玩具主动发起消息,玩具主动发起点播)
先下载github代码,下面的操作,都是基于这个版本来的! https://github.com/987334176/Intelligent_toy/archive/v1.3.zip 注意:由于涉及到 ...
- PHP实现RTX发送消息提醒
RTX是腾讯公司推出的企业级即时通信平台,大多数公司都在使用它,但是我们很多时候需要将自己系统或者产品的一些通知实时推送给RTX,这就需要用到RTX的服务端SDK,建议先去看看RTX的SDK开发文档( ...
- 使用SignalR实现消息提醒
Asp.net SignalR是微软为实现实时通信的一个类库.一般情况下,SignalR会使用JavaScript的长轮询(long polling)的方式来实现客户端和服务器通信,随着Html5中W ...
- 第一百一十二节,JavaScript浏览器检测
JavaScript浏览器检测 学习要点: 1.navigator对象 2.客户端检测 由于每个浏览器都具有自己独到的扩展,所以在开发阶段来判断浏览器是一个非常重要的步骤.虽然浏览器开发商在公共接口方 ...
- jQuery Growl插件(消息提醒)
ps:菜鸟教程 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <s ...
- Laravel-admin 消息提醒、播放音频、点击跳转
jquery-toastr 消息提醒.播放音频.点击跳转 应用情景,有新的订单生成,后台进行消息提醒并播放音频(这里用到轮询简单实现):下面附代码 1.找到laravel-admin 中的 index ...
- Socket.io+Notification实现浏览器消息推送
前言 socket.io: 包含对websocket的封装,可实现服务端和客户端之前的通信.详情见官网(虽然是英文文档,但还是通俗易懂).Notification: Html5新特性,用于浏览器的桌面 ...
随机推荐
- leetcode1029
class Solution(object): def twoCitySchedCost(self, costs: 'List[List[int]]') -> int: costs = sort ...
- Hibernate 再接触 一级缓存 二级缓存 查询缓存
缓存 就是把本来应该放在硬盘里的东西放在内存里 将来存内存里读 一级缓存: session缓存 二级缓存: sessionFactory级别的 (适合经常访问,数据量有限,改动不大) 很多的se ...
- 性感天才黑客乔治·霍兹George Hotz 17岁打脸乔布斯20岁搞疯索尼
1.国内外著名黑客信息 1) 国外著名黑客 George Hotz 乔治·霍兹(George Hotz,1989年10月2日-),美国学生,2007年8月解锁苹果(Apple)iPhone手机,使得i ...
- poj2115(扩展欧基里德定理)
题目链接:https://vjudge.net/problem/POJ-2115 题意:模拟for循环for(int i=A;i!=B;i+=C),且数据范围为k位无符号数以内,即0~1<< ...
- Pandas.Series.dt.dayofweek相关命令
- protobuf shutdownprotobuflibrary的时候crash,释放的指针出错
往往是多个子项目中有多次链接使用. 解决方法: 1. 使用静态库. 2. issure中有说2.6.1还未允许多次释放,建议使用3.4.x版本. 参考: https://github.com/prot ...
- js函数内未声明变量
<script> function test(){ testd = "Hello"; } test(); alert(testd); </script> 当 ...
- BZOJ1880或洛谷2149 [SDOI2009]Elaxia的路线
BZOJ原题链接 洛谷原题链接 显然最长公共路径是最短路上的一条链. 我们可以把最短路经过的边看成有向边,那么组成的图就是一张\(DAG\),这样题目要求的即是两张\(DAG\)重合部分中的最长链. ...
- Java多线程系列4 线程交互(wait和notify方法)
wait()/ notify()/ notifyAll() 任何Object对象都可以作为这三个方法的主调,但是不推荐线程对象调用这些方法. 1使用wait().notify()和notifyAll( ...
- Oracle中为表设置自动增长的标识列
-- Create sequence create sequence INNERID minvalue 1 maxvalue 99999999999999 start with 1 increment ...