HTML5 Web Notifications（网页通知）

川长思鸟来 2022-09-11 04:15 190阅读 0赞

## 概述 ##

通常我们在网页中需要通知提醒用户可以：①使用原生alert；②漂亮一点用layer等弹出框；③使用bootstrap等.alert样式直接显示在页面上等等。那么，为什么使用HTML5 Web Notifications，相比之下有什么区别和优缺点呢？

**优点**：可以允许网页在操作系统级别显示通知（如果你在访问别的网页，甚至在使用别的程序而非浏览器，该网页也能显示通知）。

**缺点**：浏览器兼容性较差；用户可以禁止通知，这样就需要使用其它替代效果进行通知；各平台和浏览器效果有差异，只要能实现通知效果也无所谓了。

## MDN的例子 ##

<button>Notify me!</button>
    <script> window.addEventListener('load', function () { // 首先，让我们检查我们是否有权限发出通知 // 如果没有，我们就请求获得权限 if (window.Notification && Notification.permission !== "granted") { Notification.requestPermission(function (status) { if (Notification.permission !== status) { Notification.permission = status; } }); } var button = document.getElementsByTagName('button')[0]; button.addEventListener('click', function () { // 如果用户同意就创建一个通知 if (window.Notification && Notification.permission === "granted") { var n = new Notification("Hi!"); } // 如果用户没有选择是否显示通知 // 注：因为在 Chrome 中我们无法确定 permission 属性是否有值，因此 // 检查该属性的值是否是 "default" 是不安全的。 else if (window.Notification && Notification.permission !== "denied") { Notification.requestPermission(function (status) { if (Notification.permission !== status) { Notification.permission = status; } // 如果用户同意了 if (status === "granted") { var n = new Notification("Hi!"); } // 否则，我们可以让步的使用常规模态的 alert else { alert("Hi!"); } }); } // 如果用户拒绝接受通知 else { // 我们可以让步的使用常规模态的 alert alert("Hi!"); } }); }); </script>

Chrome通知效果：  
![在这里插入图片描述][f49f5f4dd5fc4574b9033760c2907548.png]  
Chrome设置通知权限：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAZnVrYWlpdA_size_17_color_FFFFFF_t_70_g_se_x_16]

深入内容看这里：[MDN 使用 Web Notifications][MDN _ Web Notifications]

[f49f5f4dd5fc4574b9033760c2907548.png]: /images/20220828/007a0defede7448baf55a7166bab41f2.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAZnVrYWlpdA_size_17_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/27915e66a35143a786bd7952c76deb99.png
[MDN _ Web Notifications]: https://developer.mozilla.org/zh-CN/docs/Web/API/Notifications_API/Using_the_Notifications_API