Notification API，为你的网页添加桌面通知推送

博主：撩人的无眠兔
发布时间：2020 年 05 月 21 日
561次浏览
暂无评论
4916字数
分类：技术分享

<section> 
<h2>Notification 是什么 </h2> 
MDN: 
<blockquote style="display: block; font-size: 0.9em; overflow: auto; overflow-scrolling: touch; border-left: 3px solid rgba(0, 0, 0, 0.4); color: #6a737d; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; border-left-color: rgb(239, 112, 96); background: #fff9f9;"> 
Notifications API 的 Notification 接口用于配置和向用户显示桌面通知。这些通知的外观和特定功能因平台而异，但通常它们提供了一种向用户异步提供信息的方式。 
</blockquote> 
其实，MDN 的说明已经可以让我们很清楚知道 <code>Notification</code> 的作用。<code>Notification</code> 能够为用户提供异步的桌面消息通知，即使你缩小浏览器或是活动在其他标签页，只要调用该 <code>Api</code> 的标签页没被关闭，它都能工作。在桌面端的浏览器中，除了 IE 不支持外，其他就均已支持。 
<img src="https://s1.ax1x.com/2020/05/20/Y7Ijq1.png" style="display: block; margin: 0 auto; max-width: 100%" class="aligncenter"> 
以下只提到常用的属性及其方法，更全的看MDN文档: <a href="https://developer.mozilla.org/en-US/docs/Web/API/notification" style="text-decoration: none; word-wrap: break-word; font-weight: bold; color: rgb(239, 112, 96); border-bottom: 1px solid rgb(239, 112, 96);" target="_blank">https://developer.mozilla.org/en-US/docs/Web/API/notification</a> 
<h2>状态值 </h2> 
permission: 
只读属性，表示当前显示通知权限的字符串，为以下值: 
<ul> 
<li> 
<section>
denied: 拒绝显示通知 
</section></li> 
<li> 
<section>
granted: 接受显示通知 
</section></li> 
<li> 
<section>
default: 未选择，浏览器默认将其当作拒绝的行为 
</section></li> 
</ul> 
<pre><span style="display: block; background: url(https://imgkr.cn-bj.ufileos.com/97e4eed2-a992-4976-acf0-ccb6fb34d308.png); height: 30px; width: 100%; background-size: 40px; background-repeat: no-repeat; background-color: #fff; margin-bottom: -7px; border-radius: 5px; background-position: 10px 10px;"><code>Notification.permission </code></pre> 
<h2>授权 </h2> 
requestPermission: 
向用户请求显示通知的权限。只有当 <code>permission</code> 的值为 <code>default</code> 时调用此方法，右上角才会显示授权弹窗。如果用户此前已选择过，那么再次调用直接返回状态值。 
<pre><span style="display: block; background: url(https://imgkr.cn-bj.ufileos.com/97e4eed2-a992-4976-acf0-ccb6fb34d308.png); height: 30px; width: 100%; background-size: 40px; background-repeat: no-repeat; background-color: #fff; margin-bottom: -7px; border-radius: 5px; background-position: 10px 10px;"><code>Notification.requestPermission().then(res&nbsp;=>&nbsp;{ &nbsp;&nbsp;//&nbsp;denied&nbsp;或&nbsp;granted &nbsp;&nbsp;console.log(res)&nbsp; }) </code></pre> 
需要注意的是，用户如果选择拒绝后，再次调用也不会弹出授权提示。想要再次更改状态，只能由用户手动设置： 
<ul> 
<li> 
<section>
第一种：点击地址栏前的小按钮（感叹号或小锁），设置通知状态 
</section></li> 
<li> 
<section>
第二种：chrome 浏览器右上角 设置 >> 隐私设置和安全性 >> 网站设置 >> 通知 
</section></li> 
</ul> 
<h2>构造实例 </h2> 
<pre><span style="display: block; background: url(https://imgkr.cn-bj.ufileos.com/97e4eed2-a992-4976-acf0-ccb6fb34d308.png); height: 30px; width: 100%; background-size: 40px; background-repeat: no-repeat; background-color: #fff; margin-bottom: -7px; border-radius: 5px; background-position: 10px 10px;"><code>new&nbsp;Notification(title[,options]) </code></pre> 
当用户允许授权后，构造实例后，浏览器就会弹窗提示。 
<pre><span style="display: block; background: url(https://imgkr.cn-bj.ufileos.com/97e4eed2-a992-4976-acf0-ccb6fb34d308.png); height: 30px; width: 100%; background-size: 40px; background-repeat: no-repeat; background-color: #fff; margin-bottom: -7px; border-radius: 5px; background-position: 10px 10px;"><code>let&nbsp;notification&nbsp;=&nbsp;new&nbsp;Notification('通知标题',&nbsp;{ &nbsp;&nbsp;//&nbsp;正文内容 &nbsp;&nbsp;body:&nbsp;'已经错过的风景就不要再打听了，当你选定了一个方向，另一边的风景便与你无关了。', &nbsp;&nbsp;//&nbsp;图标 &nbsp;&nbsp;icon:&nbsp;'https://common.cnblogs.com/images/wechat.png', &nbsp;&nbsp;//&nbsp;预览大图 &nbsp;&nbsp;image:&nbsp;'https://user-gold-cdn.xitu.io/2020/5/18/1722800bd522f520?imageView2/1/w/1304/h/734/q/85/format/webp/interlace/1', &nbsp;&nbsp;//&nbsp;通知id &nbsp;&nbsp;tag:&nbsp;1, &nbsp;&nbsp;//&nbsp;是否一直保持有效 &nbsp;&nbsp;requireInteraction:&nbsp;true }) </code></pre> 
tag： 
通知的ID，默认 <code>tag</code> 为空。当 <code>tag</code> 相同时，重复构造实例，新通知会替换旧通知。反之，通知不会替换，而是像楼层一样叠加。同样的，忽略 <code>tag</code> 属性，通知也不会替换。 
requireInteraction： 
通知是否保持，不会自动关闭。默认为 <code>false</code>，会自动关闭。当设置为 <code>true</code> 时，由用户手动关闭或调用实例的 <code>close</code> 方法进行关闭。 
<pre><span style="display: block; background: url(https://imgkr.cn-bj.ufileos.com/97e4eed2-a992-4976-acf0-ccb6fb34d308.png); height: 30px; width: 100%; background-size: 40px; background-repeat: no-repeat; background-color: #fff; margin-bottom: -7px; border-radius: 5px; background-position: 10px 10px;"><code>notification.close() </code></pre> 
<h2>事件处理 </h2> 
监听用户点击通知时，可以为实例添加事件： 
<pre><span style="display: block; background: url(https://imgkr.cn-bj.ufileos.com/97e4eed2-a992-4976-acf0-ccb6fb34d308.png); height: 30px; width: 100%; background-size: 40px; background-repeat: no-repeat; background-color: #fff; margin-bottom: -7px; border-radius: 5px; background-position: 10px 10px;"><code>let&nbsp;notification&nbsp;=&nbsp;new&nbsp;Notification('通知标题',&nbsp;{ &nbsp;&nbsp;body:&nbsp;'已经错过的风景就不要再打听了，当你选定了一个方向，另一边的风景便与你无关了。', &nbsp;&nbsp;icon:&nbsp;'https://common.cnblogs.com/images/wechat.png', &nbsp;&nbsp;image:&nbsp;'https://user-gold-cdn.xitu.io/2020/5/18/1722800bd522f520?imageView2/1/w/1304/h/734/q/85/format/webp/interlace/1', &nbsp;&nbsp;tag:&nbsp;1 }) notification.onclick&nbsp;=&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;alert('用户点击了通知') } </code></pre> 
如果想要在事件内获取一些自定义参数信息，可以为实例添加 <code>data</code> 属性： 
<pre><span style="display: block; background: url(https://imgkr.cn-bj.ufileos.com/97e4eed2-a992-4976-acf0-ccb6fb34d308.png); height: 30px; width: 100%; background-size: 40px; background-repeat: no-repeat; background-color: #fff; margin-bottom: -7px; border-radius: 5px; background-position: 10px 10px;"><code>let&nbsp;notification&nbsp;=&nbsp;new&nbsp;Notification('通知标题',&nbsp;{ &nbsp;&nbsp;body:&nbsp;'已经错过的风景就不要再打听了，当你选定了一个方向，另一边的风景便与你无关了。', &nbsp;&nbsp;icon:&nbsp;'https://common.cnblogs.com/images/wechat.png', &nbsp;&nbsp;image:&nbsp;'https://user-gold-cdn.xitu.io/2020/5/18/1722800bd522f520?imageView2/1/w/1304/h/734/q/85/format/webp/interlace/1', &nbsp;&nbsp;tag:&nbsp;1, &nbsp;&nbsp;data:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;url:&nbsp;'https://juejin.im' &nbsp;&nbsp;} }) notification.onclick&nbsp;=&nbsp;function&nbsp;(e)&nbsp;{ &nbsp;&nbsp;window.open(e.target.data.url,&nbsp;'_blank') } </code></pre> 
实例上还可以绑定事件 <code>show</code>（显示通知时触发） 、<code>close</code>（关闭通知时触发）、<code>error</code>（通知错误时触发）。 
MDN 文档上提示，<code>onshow</code> 和 <code>onclose</code> 是一个过时的API，不保证可以正常工作。但在 chrome 浏览器测试使用这两个 API，还是能够工作的，最好还是慎用吧。 
<h2>封装Notification </h2> 
为了方便调用，简单封装创建 <code>Notification</code> 的方法，在原基础上加入消息时长配置 
<pre><span style="display: block; background: url(https://imgkr.cn-bj.ufileos.com/97e4eed2-a992-4976-acf0-ccb6fb34d308.png); height: 30px; width: 100%; background-size: 40px; background-repeat: no-repeat; background-color: #fff; margin-bottom: -7px; border-radius: 5px; background-position: 10px 10px;"><code>/* *&nbsp;@param&nbsp;{string}&nbsp;title&nbsp;-&nbsp;消息标题 *&nbsp;@param&nbsp;{object}&nbsp;options&nbsp;-&nbsp;消息配置 *&nbsp;@param&nbsp;{number}&nbsp;duration&nbsp;-&nbsp;消息时长 *&nbsp;@param&nbsp;{function}&nbsp;onclick *&nbsp;@param&nbsp;{function}&nbsp;onshow *&nbsp;@param&nbsp;{function}&nbsp;onclose *&nbsp;@param&nbsp;{function}&nbsp;onerror *&nbsp;@return&nbsp;{object} */ async&nbsp;function&nbsp;createNotify(data)&nbsp;{ &nbsp;&nbsp;//&nbsp;一些判断 &nbsp;&nbsp;if&nbsp;(window.Notification)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(Notification.permission&nbsp;===&nbsp;'granted')&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;notify(data) &nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;if&nbsp;(Notification.permission&nbsp;===&nbsp;'default')&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;[err,&nbsp;status]&nbsp;=&nbsp;await&nbsp;Notification.requestPermission().then(status&nbsp;=>&nbsp;[null,&nbsp;status]).catch(err&nbsp;=>&nbsp;[err,&nbsp;null]) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;err&nbsp;||&nbsp;status&nbsp;===&nbsp;'denied'&nbsp;?&nbsp;Promise.reject()&nbsp;:&nbsp;notify(data) &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;} &nbsp;&nbsp;//&nbsp;构造实例 &nbsp;&nbsp;function&nbsp;notify(data)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;{&nbsp;title,&nbsp;options,&nbsp;duration&nbsp;}&nbsp;=&nbsp;data &nbsp;&nbsp;&nbsp;&nbsp;options.requireInteraction&nbsp;=&nbsp;true &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;notification&nbsp;=&nbsp;new&nbsp;Notification(title,&nbsp;options) &nbsp;&nbsp;&nbsp;&nbsp;setTimeout(()=>&nbsp;notification.close(),&nbsp;duration&nbsp;||&nbsp;5000) &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;绑定事件 &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;methods&nbsp;=&nbsp;['onclick',&nbsp;'onshow',&nbsp;'onclose',&nbsp;'onerror'] &nbsp;&nbsp;&nbsp;&nbsp;for(let&nbsp;i&nbsp;=&nbsp;0;&nbsp;i&nbsp;<&nbsp;methods.length;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;method&nbsp;=&nbsp;methods[i] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(typeof&nbsp;options[method]&nbsp;===&nbsp;'function')&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notification[method]&nbsp;=&nbsp;options[method] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;notification &nbsp;&nbsp;} &nbsp;&nbsp;return&nbsp;Promise.reject() } </code></pre> 
使用 
<pre><span style="display: block; background: url(https://imgkr.cn-bj.ufileos.com/97e4eed2-a992-4976-acf0-ccb6fb34d308.png); height: 30px; width: 100%; background-size: 40px; background-repeat: no-repeat; background-color: #fff; margin-bottom: -7px; border-radius: 5px; background-position: 10px 10px;"><code>createNotify({ &nbsp;&nbsp;title:&nbsp;'标题', &nbsp;&nbsp;options:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;body:&nbsp;'消息内容' &nbsp;&nbsp;}, &nbsp;&nbsp;duration:&nbsp;3000 }) </code></pre> 
<h2>浏览器支持 </h2> 
PC 端支持还不错，移动端就基本一片红了... 
<img src="https://s1.ax1x.com/2020/05/20/Y7oEqI.png" style="display: block; margin: 0 auto; max-width: 100%" class="aligncenter"> 
兼容性查询：<a href="https://www.caniuse.com/#search=Notification" style="text-decoration: none; word-wrap: break-word; font-weight: bold; color: rgb(239, 112, 96); border-bottom: 1px solid rgb(239, 112, 96);" target="_blank">https://www.caniuse.com/#search=Notification</a> 
</section><hr class="content-copyright" style="margin-top:50px" /><blockquote class="content-copyright" style="font-style:normal">版权属于：撩人的无眠兔本文链接：<a class="content-copyright" href="https://www.wumiantu.com/technology/sr30fd.html">https://www.wumiantu.com/technology/sr30fd.html</a>转载时须注明出处及本声明</blockquote>

看了文章不打款？

发表评论取消回复

Notification API，为你的网页添加桌面通知推送

撩人的无眠兔 • 2020 年 05 月 21 日

Notification API，为你的网页添加桌面通知推送

发表评论取消回复

十年荣耀，等你回归——叶神

宝塔Linux面板安装教程

计算机硬件的组成

Windows V.S. Linux

泰迪熊《精彩时刻》

循序渐进nginx(二)：反向代理、负载均衡、缓存服务、静态资源访问

seo-网站权重怎么提高？

王者荣耀：露娜基本操作教学

深耕主动安全新华三聚生态之力护航数字未来！

【抽奖】S19终极野王诞生，医学奇迹再现峡谷！下个新英雄即将上线

Notification API，为你的网页添加桌面通知推送

发表评论 取消回复

Notification API，为你的网页添加桌面通知推送

发表评论取消回复