网站在线客服系统新消息提醒功能,支持浏览器桌面通知提醒,网页新消息声音,标题闪动效果功能实现
2023-03-07 09:42:52 时间
当我们的网站收到一条新消息的时候,需要能通知给正在访问网页的人员
浏览器打开的情况下,可以展示在电脑桌面右下角
//浏览器桌面通知
function notify(title, options, callback) {
// 先检查浏览器是否支持
if (!window.Notification) {
console.log("浏览器不支持notify");
return;
}
options.body=replaceHtml(options.body);
console.log("浏览器notify权限:", Notification.permission);
// 检查用户曾经是否同意接受通知
if (Notification.permission === 'granted') {
var notification = new Notification(title, options); // 显示通知
if (notification && callback) {
notification.onclick = function(event) {
callback(notification, event);
}
setTimeout(function () {
notification.close();
},3000);
}
} else {
Notification.requestPermission().then( (permission) =>function(){
console.log("请求浏览器notify权限:", permission);
if (permission === 'granted') {
notification = new Notification(title, options); // 显示通知
if (notification && callback) {
notification.onclick = function (event) {
callback(notification, event);
}
setTimeout(function () {
notification.close();
}, 3000);
}
} else if (permission === 'default') {
console.log('用户关闭授权 可以再次请求授权');
} else {
console.log('用户拒绝授权 不能显示通知');
}
});
}
}
并且同时可以响起声音提醒访客
//播放声音
function alertSound(id,src){
var b = document.getElementById(id);
if(src){
b.src=src;
}
var p = b.play();
p && p.then(function(){}).catch(function(e){
console.log(e,b.src);
});
}
以上两个函数是主要功能,还需要配合下面的调用方法
因为我是在vue下使用的,如没用vue可以酌情修改
html部分
<audio id="chatMessageAudio" style="display: none;" :src="require('@/assets/alert2.ogg')"></audio>
调用方法,tools是我的库名,酌情修改
//声音通知
tools.alertSound("chatMessageAudio");
//桌面通知
tools.notify(msg.name, {
body: msg.content,
icon: msg.avator
},function(notification) {
window.focus();
notification.close();
});
标题闪动
var flashing = false;
function flashTitle() {
if (flashing) {
return;
}
flashing = true;
var originalTitle = document.title;
var intervalId;
var newTitle = "?✉️" + originalTitle;
function changeTitle() {
document.title = document.title == originalTitle ? newTitle : originalTitle;
}
intervalId = setInterval(changeTitle, 1000);
window.onfocus = function () {
clearInterval(intervalId);
document.title = originalTitle;
flashing = false;
};
}
相关文章
- AWS 一周回顾 — 2022 年 5 月 16 日
- 基于AWS Step Functions和Amazon API Gateway的跨账号工作流服务
- 如何快速构建跨多账号的云CMDB和安全基线检查方案
- JAVA Optional
- Amazon EC2 现在支持 NitroTPM 和 UEFI 安全启动
- 一键搞定云端网络环境,让您轻松迁移至AWS!
- 利用QuickSight和AWS serverless服务创建跨账号的支持案例面板
- 带你SSH到Amazon SageMaker 训练实例一探究竟
- AWS 一周回顾 — 2022 年 5 月 9 日
- 使用 Readiness Gate 解决 EKS Pod 滚动升级产生的服务中断
- 手把手教你如何用Lambda + Alexa调用echo设备
- EC2 Spot实例中断引起的AWS Batch任务重试优化
- 新增 – 存储优化型 Amazon EC2 实例 (I4i),由英特尔至强可扩展 (Ice Lake) 处理器提供支持
- 多伦多的新 AWS Wavelength 区域 – 加拿大首个
- Python---Tkinter---计算器
- AWS 一周回顾 – 2022 年 5 月 2 日
- 基于Amazon Kinesis Video Streams 与 Amazon Rekognition Streaming Video Events实时视频检测方案
- 多账号环境下的密钥管理策略决策分析
- 使用 AWS Glue、Apache Hudi 和 Amazon S3 构建无服务器管道以分析串流数据
- 使用AWS托管MSK Connector和EMR Flink从AWS RDS进行CDC数据消费