Multi tool use

Web push notification showing multiple times for multiple opened tabs

I've added web push notifications in my web app; in master layout (asp.net MVC) (using signalR).

$(function () {
// Declare a proxy to reference the hub.
var notifications = $.connection.notificationHub;

//debugger;
// Create a function that the hub can call to broadcast messages.
notifications.client.updateMessages = function () {
getMeetingNotifications()
};
// Start the connection.
$.connection.hub.start().done(function () {
// alert("connection started")
getMeetingNotifications();
}).fail(function (e) {
alert(e);
});
});


If there are multiple tabs open for the same application. It pushes multiple notifications for the same activity.
I resolved this by adding a tag field.

function getMeetingNotifications() {
$.ajax({
url: '@Url.Action("Index", "Home")',
cache: false,
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
if (data.Message != null) {
Push.create("Notifications", {
body: data.Message,
icon: '../images/logo.png',
tag: data.Id,
timeout: 10000,
onClick: function () {
window.focus();
this.close();
}
});
}
}
});
}


But now it is flickering, i.e. looks like notifications are overlapping.

Is there any way to show just one notification with no overlapping (even with opening multiple tabs)?

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.