在开发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
