Web Notification显示时长设置求助：如何实现10分钟自动关闭

阿华AIGC实验室

2026-5-11

解决Web通知提前自动关闭的问题

嘿，我帮你排查下问题，你的代码里有两处关键错误，再加上浏览器本身的默认限制，才导致通知只显示15秒就消失了：

1. 变量名写错了！

你创建的通知实例是var notify = new Notification(...)，但后面绑定onshow事件和调用setTimeout的时候，却用了notification这个没定义的变量——这直接导致10分钟后关闭的逻辑根本没执行！

而且还有个小坑：直接把notify.close传给setTimeout的话，执行时this会指向全局对象，可能导致close方法调用失败。所以最好用箭头函数包裹一下，确保this指向通知实例。

修正这部分的代码：

notify.onshow = function () {
  setTimeout(() => notify.close(), 600000); // 用箭头函数绑定正确的this
}

2. 浏览器的默认限制绕不开

就算你修正了代码，也要注意：Chrome、Edge这些主流浏览器都有默认的通知自动关闭机制，通常10-20秒就会自动隐藏通知，这是浏览器为了避免打扰用户做的限制，前端代码没法完全绕过。

如果你的业务真的需要通知长时间显示，有个替代思路：只有当用户和你的网站有过交互（比如点击过页面），你可以尝试使用持久化通知，但这需要配合Service Worker实现，而且不同浏览器的支持情况有差异，成本会高一些。

修正后的完整代码

function notify(title, message, link) {
  var option = {
    body: message,
    dir: 'rtl',
    icon: '/Images/notification.png'
  }
  var notify = new Notification(title, option);
  
  notify.onclick = function () {
    window.open(link, '_blank');
    notify.close();
  };
  
  notify.onshow = function () {
    setTimeout(() => notify.close(), 600000);
  }
}