本文详细介绍如何利用 JavaScript 的 Notification API 实现浏览器桌面推送提醒。内容涵盖请求与查看推送权限的方法，包括使用 requestPermission 获取用户授权及检查 permission 状态。同时解析 Notification 构造函数参数，如标题、body、tag、icon 及 requireInteraction 等属性，并演示如何监听点击事件及处理移动端兼容性问题。
本文旨在通过简短的阅读时间，帮助开发者快速掌握为网站添加浏览器推送提醒功能的方法。
Notification 类与权限管理
Notification 类
该类的核心职责是负责消息推送。只要用户未关闭页面，即使正在使用其他应用程序，浏览器也能将消息推送给用户。
请求权限
类似于手机应用接收推送前需开放权限，浏览器在使用推送功能前也必须先获取用户的授权许可。
Notification.requestPermission().then(permission => {
console.log(permission)
})可以通过 requestPermission 方法为当前域名申请消息推送权限。该方法支持使用 Promise 语法处理请求结果，同时也支持使用回调函数方式实现。
回调参数 permission 表示用户的选择结果，其值分别为 granted（允许）或 denied（拒绝）。当检测到用户拒绝推送时，应在回调中进行相应提示，告知用户这可能导致无法及时接收消息，并指导用户如何开启权限以正常接收推送。
查看权限
由于推送权限是基于域名的，网站在首次请求权限后，后续访问将直接沿用用户的首次选择，不再重复请求。
因此，我们需要获取当前网站的推送状态，可通过以下属性来查询：
Notification.permissionpermission 属性包含三种值：granted 表示允许推送；denied 表示拒绝推送；default 表示尚未申请权限。
当值为 default 时，即可向用户发起推送权限请求。
推送消息的创建与配置
发起一条推送
const note = new Notification (title, opts)通过上述方式可以创建一条推送消息。该构造函数的第一个参数为消息标题，是必填项；第二个参数为可选对象，用于实现更多自定义显示内容：
第二个参数接收一个对象，包含以下属性：
- body：推送的主体内容。
- tag：推送标识。若声明多个 Notification 且 tag 相同，则只会显示一次推送。
- icon：需要在推送中显示的图标 URL。
- data：推送消息携带的数据信息。当用户点击推送窗口时，可利用这些数据显示相应内容。
- requireInteraction：默认情况下，推送发出后若用户无操作，几秒后会自动消失。将该属性设为 true 可使推送始终显示而不消失，默认值为 false。
如需自定义推送显示时长，可通过关闭自动消失属性，并配合 note.close() 和 setTimeout 方法手动控制推送的持续时间。
推送点击事件监听
点击推送事件
成功发起推送后，可通过 onclick 属性监听用户是否点击了该推送。
note.onclick = () => {
//在这里实现用户点击后的逻辑
}兼容性与移动端限制
其他注意事项
需注意，并非所有浏览器都支持 Notification 功能，因此在使用前应先检测浏览器的兼容性。
或许有的小伙伴会想，这个功能不错，这样在手机上也能实现网页消息推送了。然而很不幸的是，移动端浏览器几乎100%不支持 Notification ：(
以上为本文全部内容，希望对读者有所帮助，欢迎继续支持本站。