本文发表于我的博客H5的通知功能-Web桌面通知功能许可协议：署名-非商业使用-不扣分4.0国际转载请保留原链接和作者.目前，越来越多的网页使用桌面通知功能，包括微博、腾讯视频等各大网站。桌面通知功能是H5-Notifications的一个API。它允许网页或应用程序发出通知，通知将显示在页面外的系统级（通常使用操作系统的标准通知机制，但在不同的平台和浏览器上表现会有所不同），这样即使应用程序还可以在用户空闲或在后台时向用户发送消息。应用场景Notifications的诞生，简化了网站或应用与用户之间的沟通成本（时间成本和开发成本），增强了用户粘性（降低了用户离开应用的可能性）。传统的通知方式多是通过站内消息（消息）、邮件、短信等方式，通常需要刷新（跳转）页面、离开应用打开其他应用或终端才能查看消息；桌面通知功能大大简化了这一点。这个过程，消息的发送基本不消耗时间（如果不设置setTimeout，时间基本不会超过1s），用户也不需要离开应用，带来了极大的便利。可以预见，Notifications将广泛应用于许多网页或应用程序中。当然，Notifications也有它的局限性：不能存档，可以立即销毁。那么，在什么场景下可以使用这个功能呢？只能说可以应用的场景非常多：社交网站、资讯网站、网页邮件服务即时通知网站……比如打开微博页面，可能会看到（使用新浏览器）如下图Notification：表示网站使用了桌面通知功能。当你选择允许时，当网站有推送消息或者你登录账号有新消息时，桌面右下角会出现一个小的弹窗通知，如下：小爽爽！！！UserPermission-Notification.permissionNotification.permission是一个静态方法，可以获取用户当前的通知权限状态，返回一个String，可以根据返回值判断用户是否授予了通知权限。返回值有三种情况：默认用户没有询问是否授权，所以不会显示通知。granted表示之前已询问过用户，并且用户已授予显示通知的权限。denied用户已明确拒绝显示通知的权限。当值为default或deny时，不会显示通知消息，只有明确设置为grantedconstpermission=Notification.permission才会显示通知消息；if(permission==='granted'){console.log('已经授权通知，您可以通知！');}else{console.log('该用户未授权，请先授权！');}请求权限-Notification.requestPermission(CALLBACK)必须在应用程序发送通知之前获得通知成功需要发送通知的权限。Notification.requestPermission(CALLBACK)是请求权限的方法（有点类似javascript的确认弹窗），允许传入一个回调，回调会返回用户选择的权限，返回两个值，granted表示允许，denied表示拒绝。而Notification.requestPermission()支持then模式的链式调用，也就是可以异步调用。Notification.requestPermission(function(permission){console.log('Doestheuserallownotification:',permission==='granted'?'Allow':'Deny');});//这两个方法是等价的Notification.requestPermission().then(function(permission){console.log('用户是否允许通知：',permission==='granted'?'Allow':'Deny');});CreateNotification-newNotification(TITLE,OPTIONS)newNotification(TITLE,OPTIONS)方法创建可以创建一个通知实例，允许输入两个参数TITLE和OPTIONS。请注意，默认情况下（实际上由OPTIONS中的时间戳参数控制）一旦创建了通知实例，它将立即显示。TITLE参数TITLE表示通知的标题。必填参数，允许数字、字符串和空OPTIONS参数OPTIONS为非必填参数，必须是一个对象，其中包含：ps：某些参数在某些浏览器中可能无效。建议使用最新版本的谷歌浏览器。以下部分内容由Notification-MDN-EN结合谷歌翻译而来。很有可能翻译不准确。如果有，请指出。{//通知显示文本。非必填，默认为空body：'你的好友XX在线！',//通知显示文字的图片地址。不需要，默认为空image:'imgaeurl',//通知左边的图标。不需要，默认为空icon:'imgaeurl',//通知的分类标识（ID）。不需要，默认为空tag:'test',//通知关联数据，通常用于方法回调和参数传递。不需要，默认为空data:'canbeanydatatype',//通知显示延迟时间。不需要，默认通知实例在创建时显示timestamp:'',//通知正文内容的横向显示顺序，有点类似于direction属性。不需要，默认值为auto，可以是ltr或rtldir:'auto',//当没有足够的空间显示通知本身时，用于表示通知的图像的URL。不需要，默认为空badge:'xxx',//通知的语言。不需要默认为空lang:'',//显示通知时设备的振动模式。不需要，默认为空vibrate:[200,100,200],//新通知是否覆盖旧通知，如果覆盖（true），则始终只显示一个通知，如果不覆盖（false），则多个通知重叠.不需要，默认为truerenotify:true,//通知是否静音。非必须，默认false，表示静默silent:false,//通知音源文件地址。不需要，默认为空sound:'mp3',//是否不在屏幕上显示通知信息。非必填，默认false显示noscreen:false,//指定通知是否需要置顶，即不易被用户清除。不需要，默认false表示不粘sticky:false,//指定通知是否保持激活状态，直到用户点击或关闭它。不需要，默认为falserequireInteraction:false}事件和事件钩子当通知创建成功时：通知实例有一个静态方法可以用来关闭通知通知实例有四个事件钩子来跟踪通知的当前状态通知。这些事件可以通过事件处理来跟踪onshow、onclick、onclose和onerror。因为Notification也是继承自EventTarget，所以可以在其上调用addEventListener()方法。constn=newNotification('XX网站消息通知',{body:'你的朋友有新状态了，快去看看吧！',tag:'2ue',icon:'https://2ue.github.io/images/common/avatar.png',data:{url:'https://2ue.github.io'},timestamp:3000});n.onshow=function(){console.log('显示通知！');}n.onclick=function(e){//可以通过实例直接获取data中的自定义数据//也可以通过访问回调参数ewindow.open(n.data.url,'_blank');n.close();}n.onclose=function(){console.log('你屏蔽了我!!!');}n.onerror=function(err){console.日志（'出了点问题，让我们检查一下，男孩'）;throwerr;}demo写个简单的例子，大家可以打开页面体验一下，建议用最新版本的谷歌浏览器打开~Notification.jsconstNotificationInstance=Notification||窗户。Notification;if(!!NotificationInstance){constpermissionNow=NotificationInstance.permission;if(permissionNow==='granted'){//允许通知CreatNotification();}elseif(permissionNow==='denied'){控制台。log('用户拒绝了你！！！');}else{setPermission();}函数设置权限(){//请求通知权限NotificationInstance.requestPermission(function(PERMISSION){if(PERMISSION==='granted'){CreatNotification();}else{console.log('用户无情无情地拒绝了你！！！');}});}functionCreatNotification(){constn=newNotificationInstance('XX网站新闻通知',{body:'你的朋友有新状态了，快去看看吧！',tag:'2ue',icon:'https://2ue.github.io/images/common/avatar.png',数据:{url:'https://2ue.github.io'}});n.onshow=function(){console.log('显示通知！');}n.onclick=function(e){//可以直接通过实例获取数据中的自定义数据//也可以通过访问回调参数e获取数据window.open(n.data.url,'_空白的'）;n.close();}n.onclose=function(){console.log('你屏蔽了我！！！');}n.onerror=function(err){控制台e.log('出了点问题，让我们检查一下，男孩');抛出错误；}setTimeout(()=>{n.close();},2000);}}CompatibleNotifications是H5的一个新特性，毫无疑问，它的兼容性一定是一个哀号。参考Notification-MDN-ENNotification-MDN-CN
