源码介绍

单击“通知”按钮会触发 showNotification() 函数。在该函数中，首先检查浏览器是否支持桌面通知 API。如果不支持，则弹出警告框，提示用户此浏览器不支持桌面通知。如果支持，则检查是否已经授权。如果已经授权，则创建 Notification 对象并显示通知。如果没有授权，则调用 Notification.requestPermission() 方法请求授权。如果用户同意授权，则再次创建 Notification 对象并显示通知。

源码截图

网站桌面通知示例代码：通过浏览器弹出通知框（显示网页消息） 第5张插图

显示效果，本地不支持弹窗网站需要开启https才能弹窗。
网站桌面通知示例代码：通过浏览器弹出通知框（显示网页消息） 第6张插图