Chrome Notification在全屏/游戏场景下的显示及状态检测咨询

全屏场景下Chrome通知展示问题结论 #

Chrome 原生 Notification API 不支持在用户处于独占全屏状态时主动弹出通知，不管怎么调整通知优先级参数都会被系统默认拦截，通知仅会被存入系统通知中心，用户退出全屏后才会展示弹窗提示，该策略属于Chrome的默认防打扰逻辑，没有原生绕过方案。

全屏状态检测实现方案 #

你可以通过浏览器原生全屏API检测当前网页自身是否处于全屏状态，但受浏览器沙箱安全限制，无法检测其他应用（比如本地客户端游戏、其他软件的全屏）的状态。

检测代码示例 #

// 兼容多浏览器的全屏状态检测方法
function checkFullscreenStatus() {
  return !!(
    document.fullscreenElement ||
    document.webkitFullscreenElement ||
    document.mozFullScreenElement ||
    document.msFullscreenElement
  );
}

通知逻辑改造示例 #

你可以在发送通知前先判断全屏状态，将全屏期间的通知暂存，等用户退出全屏后再推送：

// 暂存全屏期间的通知队列
const pendingNotifications = [];

// 监听全屏状态变化事件
document.addEventListener('fullscreenchange', () => {
  // 退出全屏时批量发送暂存的通知
  if (!checkFullscreenStatus() && pendingNotifications.length) {
    pendingNotifications.forEach(notify => {
      sendNotificationx(notify.t, notify.b, notify.i, notify.link);
    });
    pendingNotifications.length = 0;
  }
});

// 改造原有通知发送方法
function sendNotificationx(t, b, i, link) {
  // 全屏状态下先把通知存入队列
  if (checkFullscreenStatus()) {
    pendingNotifications.push({t, b, i, link});
    return;
  }
  const notification = new Notification(t, {
    body: b,
    icon: i,
  });
  // 原有通知点击跳转逻辑可以在这里补充
  notification.onclick = () => {
    window.open(link);
    notification.close();
  };
}

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