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