如何实现浏览器标签页关闭时仍可推送Notification通知？

你当前的代码依赖页面内的setInterval定时器，当标签页关闭或进入休眠状态时，页面脚本会停止执行，自然无法触发通知。要实现后台持续推送，必须使用Service Worker——这是一种独立于页面运行的后台脚本，即使页面关闭也能在浏览器允许的范围内保持活跃。

1. 修改主页面通知逻辑（替换原有notiSet函数） #

移除页面内的定时器逻辑，改为注册Service Worker并触发后台任务：

notiSet(event) {
  if (process.client) {
    // 检查浏览器兼容性
    if (!("Notification" in window) || !("serviceWorker" in navigator)) {
      alert("请使用支持Service Worker的现代浏览器（如Chrome、Firefox）");
      return;
    }

    // 请求通知权限
    Notification.requestPermission().then(permission => {
      if (permission !== "granted") {
        alert("需要允许通知权限才能接收推送");
        return;
      }

      // 注册Service Worker脚本
      navigator.serviceWorker.register('/sw.js')
        .then(registration => {
          console.log("Service Worker注册成功");
          // 向Service Worker发送启动通知的指令
          registration.active?.postMessage({ type: 'START_NOTIFY' });
        })
        .catch(err => {
          console.error("Service Worker注册失败:", err);
        });
    });
  }
}

2. 编写Service Worker后台脚本（sw.js） #

在项目根目录创建sw.js，实现后台定时推送逻辑：

let notifyInterval;

// 监听来自主页面的指令
self.addEventListener('message', (event) => {
  if (event.data.type === 'START_NOTIFY') {
    // 避免重复创建定时器
    if (notifyInterval) clearInterval(notifyInterval);
    
    let count = 0;
    // 后台定时触发通知
    notifyInterval = setInterval(() => {
      self.registration.showNotification("New post in site Name", {
        tag: "ache-mail",
        body: `Lorem ipsum ${count}`,
        icon: "/favicon.ico" // 路径需相对于Service Worker脚本位置，或使用绝对路径
      });
      count++;
    }, 1000);
  } else if (event.data.type === 'STOP_NOTIFY') {
    // 停止定时任务
    if (notifyInterval) {
      clearInterval(notifyInterval);
      notifyInterval = null;
    }
  }
});

// 激活Service Worker时获取页面控制权
self.addEventListener('activate', (event) => {
  event.waitUntil(self.clients.claim());
});

3. 关键注意事项 #

• HTTPS要求：Service Worker仅支持HTTPS环境（localhost开发环境除外），生产环境必须部署在HTTPS服务器上。
• 浏览器后台限制：部分浏览器会对后台Service Worker的资源使用做限制，比如长时间无交互后可能暂停定时器。如果需要更可靠的推送，建议结合Push API和后端服务器触发推送（而非前端定时轮询）。
• 权限校验：必须确保用户已授予通知权限，否则Service Worker无法调用showNotification。
• 定时器间隔限制：浏览器对后台脚本的定时器间隔有严格限制（如Chrome后台定时器最小间隔可能为1分钟），高频推送需求建议改用后端触发的Push API。

补充：后端触发推送的更可靠方案 #

如果你的通知是基于实际新内容（比如新帖子），而非定时轮询，推荐使用Push API：

1. 前端订阅推送服务，获取PushSubscription对象并发送给后端。
2. 后端有新内容时，向该订阅端点推送消息。
3. Service Worker监听push事件，收到消息后立即显示通知。

这种方式无需后台定时器，更高效且不受浏览器后台运行限制。

内容的提问来源于stack exchange，提问作者Сергей Гончарь-Лысенко