Notification是HTML5中新增的API，用于配置和显示桌面通知给用户。上次在其他网站看到别人的通知弹窗，很好奇，想知道怎么实现。实际查了一下，发现并不复杂，可以说是比较简单，所以写了一篇博客分享给大家，希望能帮助大家理解这个API。npm包：我也发了一个npm包：notification-Koro1，非常轻量简单。觉得不错就点Star吧~chrome下Notification的表现：以Google为例，用户一开始需要允许notifications：允许notifications之后，显示的notification是这样的：Notificationfeaturenotificationisseparated从浏览器来看，即使用户没有停留在当前选项卡，甚至最小化浏览器，通知也会显示在主屏幕的右上角，然后在一段时间后消失。我们可以监听通知的显示、点击、关闭等事件，比如点击通知打开一个页面。博客、前端积累的文档、公众号、GitHub栗子：去各个网站的控制台运行API的具体细节，以后再说，先试试这个API吧~下面是一个简单的栗子，可以在各个网站开始在控制台运行查看Notification的效果：varoptions={dir:"auto",//Textdirectionbody:"Notification:OBKoro1评论了你的朋友圈",//NotificationbodyrequireInteraction:true,//不自动关闭通知//通知图标icon:"https://upload-images.jianshu.io/upload_images/5245297-818e624b75271127.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"};notifyMe('这是通知的标题',options);functionnotifyMe(title,options){//首先检查浏览器是否支持if(!window.Notification){console.log('浏览器不支持通知');}else{//检查用户是否曾经授予通知if(Notification.permission==='granted'){varnotification=newNotification(title,options);//显示通知}elseif(Notification.permission==='default'){//用户还没有选择，可以询问用户是否同意发送通知Notification.requestPermission().then(permission=>{if(permission==='granted'){console.log('用户同意授权');varnotification=newNotification(title,options);//显示通知}elseif(permission==='default'){console.warn('关闭授权刷新页面前用户可以再次请求授权');}else{//deniedconsole.log('用户拒绝授权，无法显示通知');}});}else{//deniedTheuserrefusedtoconsole.log('Theuserhasrefusedtodisplaynotifications');}}}浏览器支持：MDN：目前Notification支持除IE浏览器外的桌面通知，手机浏览器因为兼容性问题基本不支持，所以在使用Notification之前，我们需要检查浏览器是否支持NotificationAPI：if(window.Notification){//桌面通知的逻辑}Notification权限：避免Sites滥用通知滋扰需要用户同意才能向用户显示通知。Notification.permission用于表示当前通知显示的授权状态。有三个值：default：默认值，用户没有选择granted：用户允许网站发送通知denied：用户拒绝网站发送通知Detectionpermission：检测浏览器是否支持Notification后，需要检查用户通知权限。if(Notification.permission==='granted'){console.log('用户已同意授予');//可以随时显示通知}elseif(Notification.permission==='default'){console.log('用户还没有选择同意/拒绝');//下一步是请求用户授权}else{console.log('用户已拒绝授权，无法显示通知');}请求权限当Notification.permission是默认的时候，我们需要使用Notification.requestPermission()来请求用户权限。Notification.requestPermission()基于promise语法，then的回调函数参数为用户权限的Notification.permission状态的值。Notification.requestPermission().then(permission=>{if(permission==='granted'){console.log('用户同意授权');//可以随时显示通知}elseif(permission==='default'){console.log('用户关闭授权后可以再次请求授权');}else{console.log('如果用户拒绝授权则无法显示通知');}});//老版本使用回调函数机制：Notification.requestPermission(callback);参数与推送通知相同当授予Notification.permission时，在请求用户权限后，不需要立即发送通知，而是可以随时以任何形式发送通知。常量选项={};//传递空配置consttitle='hereisthetitle';constnotification=newNotification(title,options)//显示通知上面的代码可以显示一个简单的通知，只要用户允许你弹出。Notification的参数：title：通知的标题options：通知的设置选项（可选）。身体：字符串。通知的正文内容。tag：表示通知的一个标识标签，同一个标签只会打开一个通知窗口。图标：字符串。要在通知中显示的图标的URL。data：要与通知关联的数据可以在newNotification返回的实例中找到。重新通知：布尔值。同一个标签，当有新的通知出现时是否替换之前的（启用此项，必须设置标签）。requireInteraction：布尔值。通知不会自动关闭，默认为false（自动关闭）。还有一些不太重要的配置可以参考张新旭老师的博客和MDN的介绍requireInteraction:Keepnotificationsfromclosingautomatically。默认值为false，通知将在三四秒后自动关闭。当设置为true，并且有两个以上的通知时（newNotification(title,options)），会出现如下图的通知叠加状态。在这种情况下，很明显，我们默认只能操作最后一条通知，除非你保存每条通知返回的实例。我发布的npm包：notification-koro1，可以自定义一定时间间隔自动关闭没有自动关闭的通知，也可以一次性关闭所有通知PS：如果没有触发overlay，可能是因为你的两个notificationsItem的tag配置是一样的（同一个tag只能出现一个弹窗）。PS：safari下不支持该选项，默认自动关闭renotify：同一个默认值为false，chorme下同标签的notification不被替换，或者旧的notification设置为true，两个notificationwith相同的标签，新的通知取代了旧的通知。注意：使用renotify时必须同时设置tag选项，否则会报错。PS：这个选项在safari下是不支持的。默认情况下，有两个具有相同标签的通知，新通知替换旧通知。Notification实例：生成一个通知并返回一个实例，如下：constinstanceNotification=newNotification(title,options)instanceNotification是当前通知的一个实例，我们可以在上面查询通知的配置，监听事件，调用实例方法。在下文中，instanceNotification指的是通知返回的实例。通知配置：在通知实例上设置通知时可以读取所有配置，如：通知标题：instanceNotification.title，通知内容：instanceNotification.body，通知图标：instanceNotification.icon等。PS：这些属性是只读的,无法删除、修改或遍历。事件处理：我们可以使用通知实例来监听通知事件：click：当用户点击通知时触发show：当通知显示时触发error：当通知遇到错误时触发close：当用户关闭通知时触发通知实例Notification。onclick=e=>{//dosomething可以是：打开一个URL，发送一个请求，关闭一个通知等}注意：最好是通知一发送就监听事件，否则有些事件可能一开始不触发或从不触发。比如使用定时器监听5秒后通知的点击和显示事件，永远不会触发通知显示的回调，5秒后点击事件正常，但是之前用户的点击5秒将是错误的。如果instanceNotification.close()没有设置自动关闭通知，chrome通知会在4.5秒左右自动关闭通知，safari会在5秒后自动关闭通知（不能设置不自动关闭）。Notification没有定时功能来控制通知消失的时间。当出现多个通知时，不能统一关闭。这两个问题在我发布的npm包：notification-koro1中得到解决，并提供更清晰的回调应用场景即时通讯软件（邮箱，聊天室）体育赛事开奖结果彩票/开奖结果新闻网站重大新闻网站重大更新通知，breakingnews等notificationOthers这里有一些API/浏览器的详细信息，以及可能遇到的问题，可以先忽略，等真正遇到了再回头看。用户拒绝显示通知：一旦用户禁止网站显示通知，网站将无法再请求用户授权显示通知，用户需要在设置中更改。chrome浏览器通知设置位置：设置>高级>内容设置>通知Saafari浏览器：首选项>网站>通知>查找网站>修改权限/恢复默认关闭请求权限：在Chorme浏览器中：当用户关闭请求权限时弹窗（右上角打叉），页面还没有刷新，我们可以重新向用户请求权限。页面刷新后，浏览器默认为用户拒绝。safari浏览器下，没有关闭请求权限的选项，用户必须选择同意/拒绝。图标不显示问题：可能是网站有同源限制（比如github），不是域名下的图片，会报错，无法调用。tag：同一时间只能出现一个具有相同tag的通知。旧通知是否会被覆盖取决于：重新通知配置和浏览器。chrome下：通知关闭后，上次出现的tag在一段时间内不能再次出现，比如刷新页面请求同一个tag的通知。（safari下正常出现）safari下无法显示图标safari下，同一个网站（比如google），同一个代码，chorme可以正常显示图标，但是safari没有图标，也不报错。Google后来发现safari在stackoverflow中只支持body和tag选项，不支持icon选项。continuoustriggering在safari和chrome下短时间内连续触发notifications（没有tag，没有requireInteraction），会出现如下表现：这个表现，notification没有icon，title，content，看起来毫无意义，浏览器使用这种形式，限制开发者频繁打扰用户。notification-Koro1：试试notification-Koro1，持续维护，简单方便~结语这篇文章写的很详细，大家可以先mark一下，以后真正用到这个API的时候可以先传个栗子在article，然后找到对应的一篇内容。还有就是要注意浏览器之间的差异。自己试过chrome和safari，这两个浏览器的实现细节有很多不同。开发时要注意。博客、前端积累文档、公众号、GitHub参考资料：notification-Koro1HTML5Notification中WebNotification桌面通知的简单理解MDNHTML5桌面通知：NotificationAPI
