当前位置: 首页 > Web前端 > JavaScript

JS实现web应用或网站发送浏览器通知

时间:2023-03-27 16:15:15 JavaScript

在开发web应用系统或网站时,当用户触发某个事件,或者系统要通知用户某个事件,比如有新消息,其他人对文章点赞或评论,系统流程审核通过等,通常你可能会想到应用内通知的方式,但这种方式有一个局限性,即如果用户切换到该文章的其他标签页浏览器或其他使用应用时,可能无法及时看到应用系统的通知,此时可以使用浏览器的Notification通知功能。1.什么是浏览器通知?通知是浏览器提供的一种机制,允许网页向用户显示系统通知,这些通知在顶级浏览上下文视口之外,这样即使用户切换了选项卡或移动到不同的应用程序,它们也可以显示,并且与通知相关的API旨在与不同平台上的现有通知系统兼容。首先我们来看看浏览器的Notification通知是什么样子的。这里我们以SegmentFault网站为例。只要有新用户关注或者文章被点赞收藏,SegmentFault网站就会自动发送Notification通知(能看到通知的前提是允许网站发送Notification),具体通知如下如下:除了SegmentFault网站,还可以看到网页版微信的系统通知,也是类似的。2.如何使用通知?显示一个系统通知,一般需要分为两步:用户授予显示通知的权限,发送系统通知。(1)用户授予显示通知的权限。系统需要向用户发送通知。如果用户不想查看通知,即没有授予相应的权限,那么即使发送了通知,用户也看不到。如何向用户请求查看系统通知的权限?您可以使用以下方法Notification.requestPermission()。该方法有3个返回值:granted、denied、default。最新规范已将此方法更新为基于承诺的语法。工作原理如下:Notification.requestPermission().then(function(permission){...});我们看一个具体的例子,在localhost上请求显示系统通知的权限,并根据不同的选择结果打印相应的日志信息,代码如下:Notification.requestPermission()。then(function(result){if(result==='denied'){console.log('拒绝显示系统通知');return;}if(result==='default'){console.log('default');return;}console.log('允许显示系统通知')});按F12打开Chrome的控制台,复制上面的代码运行,可以看到浏览器会弹出一个查询框,如下:选择不同,控制台输出不同的结果Allow:控制台输出系统允许显示通知,如果选择允许,再次请求权限时,不会弹出选择框,而是直接在控制台输出系统通知;禁止:控制台输出拒绝显示系统通知.如果选择Deny,再次请求权限时,不会再弹出选择框,但控制台会直接输出拒绝显示系统通知;;xoff:控制台会输出default,如果直接关闭,再次请求权限时,仍然会弹出选择框;选择【允许】后,此时点击地址栏中的信息按钮,可以看到通知已经开启,如下:如果不想显示通知,可以在这里关闭通知即可,或者使用如下语句查看当前用户的授权状态,如下:Notification.permission运行后,输出结果为'granted'(2)发送系统通知当用户允许显示系统通知时,可以发送通知。这时,你可以使用Notification()构造函数来创建一个新的通知。该方法可以传入两个参数,如下:title(必填)定义一个通知的标题,当它被触发时,它会显示在通知窗口的顶部文本;它的值可以是auto(自动)、ltr(从左到右)或rtl(从右到左);lang:指定通知中使用的语言。该字符串必须在BCP47语言标签文档中有效;body:通知中显示的附加字符串;tag:给通知一个ID,以便在必要时刷新、替换或删除通知;icon:一张图片的URL,将用于显示通知的图标;除了以上5个常用选项外,还有其他badge、image、data、vibrate、renotify、requireInteraction等,具体可以参考官网介绍https://developer.mozilla.org/zh-CN/docs/Web/API/notification/Notification下面测试一个简单的通知,代码如下:letnotification=newNotification('有新通知');这个通知只有一个标题,运行后可以看到增加了一些选项,我们再测试一下系统通知,修改后的代码如下:letnotification=newNotification('有新通知',{dir:'ltr',lang:'zh-CN',body:'通知文本内容:你的请假流程已获批',icon:'http://localhost/coder/favicon.ico'});运行后可以看到通知如下(3)Notification事件NotificationNotification有四种事件,可以通过监听通知事件来执行不同的操作。具体事件如下:Notification.onclick:处理点击事件,每当用户点击通知时触发;Notification.onshow:处理show事件,当notification显示时触发;Notification.onerror:错误事件的处理,每当通知遇到错误时触发;Notification.onclose:关闭事件的处理,当用户关闭通知时触发。下面测试通知事件的监听,代码如下:thenotification:yourTheleaveprocesshasbeenapproved',icon:'http://localhost/coder/favicon.ico'});//监听通知显示事件notification.onshow=()=>console.log('通知已显示');//监听通知点击事件notification.onclick=()=>console.log('通知被点击');//监听通知关闭事件notification.onclose=()=>console.log('通知关闭');//监听通知错误事件notification.onerror=()=>console.log('NotificationError');运行时,控制台会直接输出如下信息。单击通知后,它将输出通知。当点击通知时,通知关闭3.发送通知通知代码结合上面的介绍,下面给出发送通知的参考代码,如下:functionsendNotification(title,body,icon,callback){//首先检查浏览器是否支持if(!('Notification'inwindow)){//IE浏览器不支持发送Notification通知!返回;}if(Notification.permission==='denied'){//如果用户拒绝显示通知return;}if(Notification.permission==='granted'){//用户被授权,直接发送通知notify();}else{//默认先询问用户是否允许显示通知Notification.requestPermission(function(permission){//如果用户同意,可以直接发送通知if(permission==='granted'){notify();}});}functionnotify(){letnotification=newNotification(title,{icon:icon,body:body});notification.onclick=function(){回调&&回调();console.log('点击通知框')}notification.onclose=function(){console.log('关闭通知框');};}}我们测试一下:sendNotification('下班通知','今天周五,还有十分钟下班','http://localhost/coder/favicon.ico');运行后通知效果如下:参考:https://developer.mozilla.org/zh-CN/docs/Web/API/notificationhttps://developer.mozilla.org/zh-CN/docs/Web/API/Notifications_API