如何让用户在浏览器最小化的状态下也能及时的收到消息提醒呢? 这个问题作为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-浏览器消息提醒的更多相关文章

  1. jquery 消息提醒插件 toastmessage

    最近做系统,想到使用后台要使用消息提醒,但是一直苦恼消息提醒的效果,于是找了一个toastmessage,还不错.记录下使用的方法. 第一步:引入需要的文件 <script type=" ...

  2. [Asp.net 开发系列之SignalR篇]专题六:使用SignalR实现消息提醒

    一.引言 前面一篇文章我介绍了如何使用SignalR实现图片的传输,然后对于即时通讯应用来说,消息提醒是必不可少的.现在很多网站的都有新消息的提醒功能.自然对于SignalR系列也少不了这个功能的实现 ...

  3. python 全栈开发,Day130(多玩具端的遥控功能, 简单的双向聊天,聊天记录存放数据库,消息提醒,玩具主动发起消息,玩具主动发起点播)

    先下载github代码,下面的操作,都是基于这个版本来的! https://github.com/987334176/Intelligent_toy/archive/v1.3.zip 注意:由于涉及到 ...

  4. PHP实现RTX发送消息提醒

    RTX是腾讯公司推出的企业级即时通信平台,大多数公司都在使用它,但是我们很多时候需要将自己系统或者产品的一些通知实时推送给RTX,这就需要用到RTX的服务端SDK,建议先去看看RTX的SDK开发文档( ...

  5. 使用SignalR实现消息提醒

    Asp.net SignalR是微软为实现实时通信的一个类库.一般情况下,SignalR会使用JavaScript的长轮询(long polling)的方式来实现客户端和服务器通信,随着Html5中W ...

  6. 第一百一十二节,JavaScript浏览器检测

    JavaScript浏览器检测 学习要点: 1.navigator对象 2.客户端检测 由于每个浏览器都具有自己独到的扩展,所以在开发阶段来判断浏览器是一个非常重要的步骤.虽然浏览器开发商在公共接口方 ...

  7. jQuery Growl插件(消息提醒)

    ps:菜鸟教程 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <s ...

  8. Laravel-admin 消息提醒、播放音频、点击跳转

    jquery-toastr 消息提醒.播放音频.点击跳转 应用情景,有新的订单生成,后台进行消息提醒并播放音频(这里用到轮询简单实现):下面附代码 1.找到laravel-admin 中的 index ...

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

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

随机推荐

  1. leetcode979

    搞不定这种递归计算,可能我的头脑是“线性”的,这种一层一层的,想起来太费劲了,想的头发都没了.以后希望能有AI来写这种程序吧,AI不怕掉头发! class Solution(object): def ...

  2. position:fix相对父元素定位

    大家都知道,当position的值为fix时,生成绝对定位的元素,相对于浏览器窗口进行定位. 它常常应用的场合是,当下拉滚动条时固定导航栏到顶部,将广告固定在页面两侧或浏览器中间. 如果需要将导航栏d ...

  3. Java 集合类实现原理

    转载自:http://blog.csdn.net/qq_25868207/article/details/55259978 :##ArrayList实现原理要点概括 参考文献:http://zhang ...

  4. RESTful API格式 图片验证码接口

    之前公司写图片验证码时用的是session 后来写接口时也想用session存验证码  不过领导说RESTful API 写接口 没有session这一说 于是就用了redis 存验证码 还有就是接口 ...

  5. http://ctf.bugku.com/challenges#%E9%80%86%E5%90%91%E5%85%A5%E9%97%A8:bugku--逆向入门

      文件是:   分析挺简单,主要是data urls知识点.     首先使用peid检测是否加壳,发现它居然是jpg文件.使用notepad++查看,结果如下.   嗯,百度一下子,知道了data ...

  6. .net like模糊查询参数化

    List<SqlParameter> paras = new List<SqlParameter>(); if (!string.IsNullOrEmpty(ciName)) ...

  7. swift hidesBottomBarWhenPushed 设置界面

    方法一(推荐):一级界面push的时候设置,子页面无需设置 let vc = JYMyCommissionController() vc.hidesBottomBarWhenPushed = true ...

  8. [leetcode]29. Divide Two Integers两整数相除

      Given two integers dividend and divisor, divide two integers without using multiplication, divisio ...

  9. 将Promise融会贯通之路

    前端初学者经常会问,我如何在ajax1结束之后才启动ajax2呢?我怎么做才能在所有的ajax结束之后触发某程序呢?亦或是哎真是烦,5个ajax套在一起,原来的逻辑是什么呀! 一个稍微有点经验的前端程 ...

  10. centos 7 命令行模式和桌面版之间的切换

    CentOS7图形界面与命令行界面切换 在图形界面使用 ctrl+alt+F2切换到dos界面 dos界面 ctrl+alt+F2切换回图形界面 在命令上 输入 init 命令 切换到dos界面 输入 ...