在线客服系统源码开发实战总结:H5 Notifications浏览器桌面通知
2023-02-18 15:36:59 时间
在浏览器访问网站,想在浏览器最新化的情况下,也能收到右下角的消息通知
这个时候就会用到H5 Notifications
具体效果可以参照演示页面 演示页面-唯一在线客服系统
实现代码js
function notify(title, options, callback) { // 先检查浏览器是否支持 if (!window.Notification) { console.log("浏览器不支持notify"); return; } 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('用户拒绝授权 不能显示通知'); } }); } }
使用上面封装的函数
notify("名称", { body: "内容", icon: "头像地址" },function(notification) { notification.close(); });
如果自己在弹出授权申请的时候,点击了拒绝,那么可以去浏览器的通知设置里面重新打开下
Edge浏览器设置通知
-
首先,打开Edge浏览器,点击右上角的三个点,并在弹出的菜单中找到且点击“设置”
-
接着,在“设置”窗口中,选择左侧的“Cookie和网站权限”,在右侧找到并点击“通知”
相关文章
- 抵制羊毛党,图计算“加持”互联网电商风控
- 揭秘GaussDB(for Redis):全面对比Codis
- 梦幻联动!金蝶&华为云面向大企业发布数据库联合解决方案
- 面对锁等待难题,数仓如何实现问题的秒级定位和分析
- 技术揭秘:华为云DLI背后的核心计算引擎
- 移动计算云分布式数据缓存服务,实现快速可靠的跨区域多活复制
- 技术生态两手抓,打造面向未来的企业级领先数据库
- 开发者必看,面试官心中的最佳数据库人才模型是什么样?
- 从相识到相惜:Redis与计算存储分离四部曲
- 面对key数量多和区间查询低效问题:Hash索引趴窝,LSM树申请出场
- 大数据处理黑科技:揭秘PB级数仓GaussDB(DWS) 并行计算技术
- 1秒启动Web Server
- 中心化交易所如何用Merkle Tree实现资产储备证明
- 揭秘GaussDB(for Redis):全面对比Codis
- 梦幻联动!金蝶&华为云面向大企业发布数据库联合解决方案
- 面对锁等待难题,数仓如何实现问题的秒级定位和分析
- 技术生态两手抓,打造面向未来的企业级领先数据库
- 看我如何连夜自建网站背刺我的求职对手们
- GaussDB拿下的安全认证CC EAL4+究竟有多难?
- 华为云开发者官网首页焕新升级,赋能开发者云上成长