React 轮询并弹出浏览器通知（Notification）_react windos.notification系统提示-CSDN博客

本文链接：https://blog.csdn.net/weixin_42584321/article/details/107817253

本文介绍了如何在React应用中利用HTML5的Notification特性实现轮询检查并在满足条件时弹出浏览器通知。详细步骤包括设置轮询、获取用户通知权限、创建Notification实例以及监听相关事件。示例代码展示了在Mac和Windows系统下的通知效果。

摘要由CSDN通过智能技术生成

Notification是H5新增属性，目前应该是除IE外其他浏览器都兼容

点我可以看Notification的完整api

需求是进入页面后开始轮询，然后符合条件的话弹出浏览器通知框

一、轮询
我这里直接使用setTnterval进行轮询，首先定义一个变量（将setInterval赋值给一个变量的意义在于需要用这个变量在页面销毁、卸载的时候清除掉，清除setInterval的重要性远高于清除setTimeout）。不需要做轮询的可以直接看下一步。

//页面挂载后开始轮询,每隔5秒
componentDidMount(){
   
    this.timer=setInterval(()=>{
   
		//do something
	},5000)
}
//页面卸载时清除setInterval
componentWillUnmount(){
   
	if(this.timer !== null) {
   
		clearInterval(this.timer);
	}
}

二、弹出浏览器通知

1、首先需要获取通知权限

Notification.requestPermission();//获取通知权限

这样网页会弹出一个请求弹框，选择允许（如果选择了允许并且下面的步骤都完成了还没有弹出的话，请先检查一下是否是电脑系统禁止了谷歌弹出消息通知）

2、判断用户是否同意通知的显示

我们可以通过Notification.permission来判断用户是否同意了通知的显示

if (Notification.permission === "granted"){
   // denied (用户拒绝了通知的显示), granted (用户允许了通知的显示)，default表示默认
	//do something
}else if(Notification