当打开一页的两个选项卡时，通知不起作用

Posted 2023-05-08

【中文标题】当打开一页的两个选项卡时，通知不起作用

【英文标题】：Notification does't work when there are two tabs of one page open

【发布时间】：2019-09-28 23:52:23

【问题描述】：

我在我的 MVC Web 应用程序上与 SignalR 一起使用通知。我正在从服务器的某个页面中调用客户端函数。问题是当该页面同时在两个浏览器选项卡中打开时，不会弹出任何通知。我应该提一下，当页面仅在一个选项卡中打开时，它确实可以正常工作。

我注意到，如果我在创建通知对象的行之前放置一个警报，两个选项卡都会收到通知，这就是我所期望的。提前致谢。

$(function () 
    var notificationHub = $.connection.notificationHub;
    $.connection.hub.start();
    notificationHub.client.sendMessage = function (content) 
        setTimeout(notifyMe(content), 10);
    ;
);

function notifyMe(message) 
    if (!("Notification" in window)) 
        alert("This browser does not support system notifications");
    
    else if (Notification.permission === "granted") 
        var notification = new Notification(message);            
    
    else if (Notification.permission !== 'denied') 
        Notification.requestPermission(function (permission) 
            // If the user accepts, let's create a notification
            if (permission === "granted") 
                var notification = new Notification(message);
            
        );
    

更新： 以下是通知创建代码前面有一个警报的场景，它可以按预期工作：

    function notifyMe(message, system) 
        if (!("Notification" in window)) 
            alert("This browser does not support system notifications");
        
        else if (Notification.permission === "granted") 
            alert('hit');
            var notification = new Notification(system, 
                body: message,
                tag: (Math.floor(Math.random() * 10)).toString(),
                icon: 'Content/Images/logo.png',
                dir: 'rtl',
                background: '#ff0000'
            );

        
        else if (Notification.permission !== 'denied') 
            alert('hit');
            Notification.requestPermission(function (permission) 
                if (permission === "granted") 
                    var notification = new Notification(message)
                
            );
        
    

$(function () 
    var notificationHub = $.connection.notificationHub;
    $.connection.hub.start();
    notificationHub.client.sendMessage = function (content, system) 
        setTimeout(notifyMe(content, system), 10);
    ;
);

【参考方案1】：

问题可能出在您的信号器初始化代码中。 我假设 var notificationHub 是一个 globla 对象，并且您已将此 doe 放在母版页中。

那么你需要在初始化之前检查notificationHub是否为null。只需像这样更改您的代码：

$(function () 
    if(notificationHub === undefined || notificationHub === null)
       var notificationHub = $.connection.notificationHub;
       $.connection.hub.start();
       notificationHub.client.sendMessage = function (content) 
           setTimeout(notifyMe(content), 10);
       ;
    
);

更新：

当您确认信号器正常工作（即警报消息在两个选项卡中都有效）后，请尝试对 Notification 对象执行以下操作：

var notification = new Notification('Test', 
    body : message,
    tag : 'notify-tag-name', //Make this a random number
    icon : 'icon.png'
);

请注意，如果 tag 属性的值在两个浏览器选项卡中相同，则即使打开了许多浏览器选项卡，通知也只会显示一次。在这种情况下，您可以在标签名称中添加一个随机数，以确保它们在标签之间是不同的。

【讨论】：

感谢您的回复，我按照您的要求更改了代码，但问题仍然存在。我相信初始化没问题，通知创建本身一定有问题。正如我之前提到的，如果我在创建通知之前发出警报，它会按照预期的方式工作。

Notification 是什么类型的对象？它是第三方库还是自定义库？

不，它不是第三方库。它是内置功能。您可能已经注意到，在许多网站上，当他们要求您允许向您发送通知时。这是文档页面：developer.mozilla.org/en-US/docs/Web/API/Notifications_API/…

好的，它是标准的浏览器库。我已经更新了答案。试试看？

抱歉@Rahatur 回复晚了，随机标签也不起作用。问题是，在两个打开的选项卡场景中没有显示通知。它仅在通知创建行前面有警报时才有效。