如何实现参数达到阈值时自动推送浏览器通知的功能

1. 改造通知调用方法 #

把原有固定内容的通知方法改造为支持动态传参，方便传入阈值超标时的自定义提示内容：

// 封装可自定义内容的通知方法
function showNotification(title, content) {
  // 先判断权限再调用，避免控制台报错
  if (Notification.permission !== "granted") return;
  new Notification(title, {
    body: content,
    icon: "/notification-icon.png" // 可选参数，可自定义通知展示的图标
  })
}

// 页面初始化阶段统一申请通知权限，不用和触发逻辑耦合
function initNotificationPermission() {
  if (Notification.permission === "granted") return;
  if (Notification.permission !== "denied") {
    Notification.requestPermission();
  }
}

2. 实现阈值检测与防重复触发逻辑 #

核心解决两个问题：实时获取业务参数值、避免阈值持续超标时重复推送通知：

• 提前定义阈值、状态锁变量，只有当参数首次超过阈值时才推送，参数回落到阈值以下后重置锁，保证下次超标可以再次触发
• 实时参数可以根据你的业务来源对接：如果是后端主动推送用WebSocket监听即可，如果是定时拉取可以用setInterval轮询业务接口
  以下为轮询人数统计接口的示例代码，可直接替换为你自己的业务逻辑：

// 业务配置项
const PEOPLE_COUNT_THRESHOLD = 50; // 人数阈值
let hasSentOverLimitNotice = false; // 通知发送状态锁

// 页面加载完成后初始化通知权限
initNotificationPermission();

// 定时检测人数逻辑，可替换为WebSocket监听逻辑
setInterval(async () => {
  // 示例：调用后端接口获取当前场所人数，替换为你的实际业务数据源即可
  const currentPeopleCount = await fetch("/api/current-people-count").then(res => res.json());

  // 阈值判断逻辑
  if (currentPeopleCount > PEOPLE_COUNT_THRESHOLD && !hasSentOverLimitNotice) {
    showNotification("场所人数超标提醒", `当前实时人数为${currentPeopleCount}，已超过阈值${PEOPLE_COUNT_THRESHOLD}，请及时处理`);
    hasSentOverLimitNotice = true; // 标记已发送通知，避免重复推送
  }
  // 人数回落到阈值以下后重置锁，下次超标可再次触发通知
  if (currentPeopleCount <= PEOPLE_COUNT_THRESHOLD && hasSentOverLimitNotice) {
    hasSentOverLimitNotice = false;
  }
}, 3000) // 检测间隔3秒，可根据业务需求调整

3. 注意事项 #

• 若你的实时数据通过WebSocket推送，把setInterval的逻辑替换成WebSocket的消息监听回调即可，无需轮询
• 部分浏览器在无痕模式下默认禁止通知权限，建议做好权限判断的兼容处理
• 受浏览器安全策略限制，通知触发必须在用户有页面交互之后，建议把权限申请逻辑绑定在用户点击操作上（比如登录、查询按钮的点击事件），避免权限申请被浏览器自动拦截

内容的提问来源于stack exchange，提问作者Denxah129