在线客服系统源码开发实战总结：H5 Notifications浏览器桌面通知

在浏览器访问网站，想在浏览器最新化的情况下，也能收到右下角的消息通知

这个时候就会用到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和网站权限”，在右侧找到并点击“通知”
最后，在“通知”页面中，找到并取消勾选“发送前询问(推荐)”即可

在线客服系统源码开发实战总结：H5 Notifications浏览器桌面通知相关推荐

在线客服系统源码开发实战总结：需求分析及前端代码基本技术方案
在这个系列文章里,我尝试将自己开发唯一客服系统(gofly.v1kf.com)所涉及的经验和技术点进行梳理总结. 文章写作水平有限,有时候会表达不清楚,难免有所疏漏,欢迎批评指正该系列将分成以下几个 ...
在线客服系统源码开发实战总结：动态加载js文件实现粘贴一段js的sdk代码，直接引入插件效果...
常见的在线客服系统中,或者是统计代码中,粘贴一段js代码,就能引入某个插件的效果.这个是怎么实现的呢? 原理非常的简单: 对于不同的加载文件类型创建不同的节点,然后添加各自的属性,最后扔到head 标 ...
在线客服系统源码开发实战总结：渐变色效果的实际运用效果
css里面有个背景色渐变色的效果,我们能拿来做什么呢现在就演示下,我在开发此页面时所实际实现的样子演示页面-唯一在线客服系统实现代码很简单,效果还是很不错: background: linear ...
开源在线客服系统源码（支持PC/H5/公众号/小程序）基于golang的网页在线客服系统...
近年来市面上出现了越来越多的在线客服系统,还不断有新的在线客服企业加入,这让刚接触在线客服系统的人挑得眼花缭乱,那到底应该怎么选择一个适合企业使用的在线客服系统呢我先给大家介绍下在线客服发展的历史, ...
开源在线客服系统源码（PHP开发的网页在线客服聊天系统源码）
开源在线客服系统源码是一个可以高度个性化定制客户支持管理系统,最初为IT支持公司开发,以管理和跟踪他们的支持案例.零售商店和业务客户.使用最新的编程语言和技术,是完全web启用.我们已经将它打包为一个 ...
最新在线客服系统源码软件代码+自动回复+管理后台
正文: 完整标题: PHP在线客服系统源码是一款PHP开发的在线客服系统源码,网站在线客服系统,网页在线客服软件代码,免费在线客服系统源码,支持多商家多客服,客服系统源码支持二开,客服同时支持手机移动 ...
在线客服系统源码（PHP完全开源版）
在线客服系统软件使开发和运营团队能够高速协作,因此要求源码系统能够快速响应业务变化,并快速提供出色的客户和员工服务体验. 在线客服源码演示及获取:zxkfym.top 客服沟通问题加起来会成为重大的财 ...
java在线客服系统源码 springboot客服聊天源码网页客服源码 netty通信技术，java源码
ava在线客服系统源码 springboot客服聊天源码网页客服源码 netty通信技术,java源码 Java在线客服系统源码企业网站客服聊天源码网页客服源码开发环境:Java + Spri ...
Spring boot在线客服系统源码在线坐席对话源码
JAVA在线客服系统源码网站在线客服源码网页版在线聊天源码开发环境:Java + Spring boot + mysql + 通信技术:netty框架后台管理首页-工作绩效(会话.邀请.拒绝 ...

在线客服系统源码开发实战总结：H5 Notifications浏览器桌面通知

Edge浏览器设置通知

在线客服系统源码开发实战总结：H5 Notifications浏览器桌面通知相关推荐

最新文章

热门文章