Notifications showing with timeouts but timeout starts when the browser is visible

[Moulde]

So, I have a project where something is running in the background, and sometimes create notifications, each with different timeouts.

This works fine, but if the browser is hidden on the screen, ie. minimized or something, it seems that all the notifications are shown all at once when the browser gets focus. With all the timers also starting at once, which means that if the user has had the browser hidden for a while, it will fill the screen with notifications when the browser is then shown.

Ideally the timers would run behind the scenes, and if a notification 'expires', it should not be shown when the user opens the browser. Alternatively I, if possible, should detect if the browser/tab is visible/active and only show notifications if that's the case - this is probably the solution I'm going with for now.

Has anyone else come up with another solution?

[zetsuno]

Did you happen to find a solution for this? I'm running into the same problem. Thank you.

[Moulde]

No, unfortunately not - I am also still looking for a solution. I'm thinking that it should be possible to hook into the code where the notifications are "published" and then check if the age exceeds the timeout, and remove it. I took a look at it but I was not really able to figure out where to do this. Also there might not really be a good way to hook into it, as it might depend on the browser in some way.

[ChrisDoohan]

@Moulde I'm using the Vue variant of snotify, but I ended up working around this issue using the following monkeypatch that prevents message queuing if the window is minimized or the tab is not active. Seems to behave correctly on Firefox and Chrome. Your mileage may vary.

var originalCreate = Vue.prototype.$snotify['create']
Vue.prototype.$snotify['create'] = function() {
  if (document.visibilityState !== 'visible') {
    return
  }
  originalCreate.apply(Vue.prototype.$snotify, arguments)
}