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新特性,用于浏览器的桌面 ...
随机推荐
- 2019最新整理PHP面试题附答案
1.什么事面向对象?主要特征是什么?面向对象是程序的一种设计方式,它利于提高程序的重用性,使程序结构更加清晰.主要特征:封装.继承.多态. 2.SESSION 与 COOKIE的区别是什么,请从协议, ...
- grains和pillar的联合使用
在编写sls文件的时候,对于不同的客户端,在配置管理的时候,其安装的环境,配置文件和启动的服务都相同: 如果完全是不同的环境,建议写单独的sls文件,不要混合在一起; 如果是相同的环境,只不过对于不同 ...
- Linux下常用系统分析工具总结(转)
1.1 top top命令可以实时动态地查看系统的整体运行情况,是一个综合了多方信息监测系统性能和运行信息的实用工具. Top常用的可选参数和其对应的含义如下: (1)-c:显示完整的命令: (2)- ...
- python学习笔记(五)- 文件操作
1.读文件f = open('word.txt',encoding='utf8') #默认打开当前目录下的文件,打开其它目录用绝对路径#f = open('word.txt',encoding='u ...
- 【Django】django.core.exceptions.ImproperlyConfigured: Error loading MySQLdb module.
最近学习Django的过程中,在cmd打算使用python manage.py shell来测试数据的时候,当我一导入自己写的model类,就发现报了这个错误django.core.exception ...
- python中tolist()命令
- maven打包不包含配置文件[z]
如果使用maven-jar-plugin和maven-dependency-plugin打包,排除配置文件的方法: 上面的配置是把resources下的配置文件不打进项目的jar包中,主要使用的是&l ...
- 每月最后一周的周六晚上21:00执行任务-crontab
0 21 * * 6 /bin/sh /root/time.sh #“6”代表周六 时间判断脚本如下: #!/bin/bash if [ "$(date -d "+7 days&q ...
- idea本地运行JavaWeb项目
1.需安装的软件有: JDK,当前版本jdk1.8 maven,当前版本3.2.1 mysql,mysql5.7 tomcat,tomcat9 git客户端,TortoiseGit-2.1.0.0-6 ...
- ORM常用字段介绍
Django中的ORM Django项目使用MySQL数据库 1. 在Django项目的settings.py文件中,配置数据库连接信息: DATABASES = { "default&qu ...