SignalR触发的Noty通知仅Chrome激活标签页显示如何解决

问题原因 #

这个现象是Chrome针对后台标签页的性能优化机制导致的：

• 浏览器会暂停后台标签页的CSS动画、requestAnimationFrame回调执行，降低非关键DOM操作的优先级，仅保证websocket/接口回调、JS主逻辑正常执行，所以你能触发RefreshGrid但看不到Noty通知
• Noty的展示逻辑默认依赖入场动画的执行完成，动画被浏览器挂起后通知就会处于待显示状态，直到你切回标签页恢复动画执行才会弹出

解决方法 #

方案1：非激活状态下降级动画，强制显示通知 #

首先全局监听标签页的激活状态，非激活状态下关闭Noty的动画，跳过动画依赖直接渲染：

// 全局添加标签页激活状态监听
let isTabActive = true;
window.addEventListener('focus', () => isTabActive = true);
window.addEventListener('blur', () => isTabActive = false);

HubProxy.client.shownotification = function (msg) {
    RefreshGrid(); 
    // 非激活状态下禁用动画，避免被浏览器节流
    const openAnim = isTabActive ? 'animated bounceInRight' : 'none';
    const closeAnim = isTabActive ? 'animated bounceOutRight' : 'none';
    new Noty({
        theme: globaltheme,
        type: msg.TYPE,
        layout: globalposition,
        text: '<i class="bi bi-check-square me-1"></i>' + msg.MESSAGE,
        timeout: isTabActive ? globaltimer : false, // 非激活时暂时关闭自动关闭，避免定时器节流导致通知被提前吞掉
        animation: {
            open: openAnim,
            close: closeAnim
        },
        callbacks: {
            onShow: function() {
                // 强制修改样式直接显示，跳过动画等待逻辑
                this.bar.style.display = 'block';
                // 如果需要非激活时也按原时长自动关闭，可添加不受节流影响的定时逻辑
                if(!isTabActive) {
                    setTimeout(() => this.close(), globaltimer);
                }
            }
        }
    }).show();
}

方案2：搭配系统通知实现后台触达 #

如果需要用户切到其他应用也能收到通知，你可以在标签页未激活时调用浏览器原生的Notification API，不需要依赖页面内的Noty组件，通知会直接在系统桌面弹出：

// 提前在页面加载时申请通知权限
if(Notification.permission !== 'granted') {
    Notification.requestPermission();
}

HubProxy.client.shownotification = function (msg) {
    RefreshGrid();
    if(!isTabActive && Notification.permission === 'granted') {
        new Notification('新消息通知', { body: msg.MESSAGE });
    } else {
        // 插入上面修改后的Noty显示逻辑即可
    }
}

注意事项 #

测试时需要将页面标签页完全切到后台（不要和其他窗口并排显示），才能验证后台通知的显示效果。

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