Notifications are not auto dismissed when browser tab is inactive

[pauliusg]

I can reproduce this with Chrome browser. For example, when browser tab is not active, code in that browser tab receives a message and calls:

Store.addNotification({
  ...notification,
  dismiss: {
    duration: 2000
  }
})

If I click on that browser tab after 2 seconds, I would expect not to see a notification because time, to display it, has elapsed.
But notification appears as soon as I activate browser tab.

You can quickly check this in your demo page: https://teodosii.github.io/react-notifications-component/
Open Chrome console and execute this:

setTimeout(() => document.getElementsByClassName('btn-outline-secondary')[0].click(), 2000)

Then quickly go to other browser tab and wait 10 seconds. Go back to demo page tab and you will see appeared notification.

[teodosii]

Right, that's because animations are paused when tab is inactive (or sort of paused). Maybe I'll change it in the future to calculate elapsed time from last active tab time, but for now no such thing.

[masbaehr]

This is unfortunately very annoying to the point which makes me want to change notification library. Note: I'm not ranting or "demanding" a fix but i'd really also like to see a solution for it in future, so i think closing the issue is wrong.

Especially if the Notification occur while the Tab is not in the foreground, they stack up and wait for the Tab to be active again, causing a tsunami of notifications which did not pass.

Maybe a quick solution would be to add a configuration flag to completely omit any notification which happens in the background and leave it to the developer to show missed notifications

[pauliusg]

@masbaehr I use this workaround:

if (document.visibilityState !== 'hidden') {
  Store.addNotification({
    ...notification,
    dismiss: {
      duration: 3000
    }
  })
}

Downside of this, is that, if for example tab was hidden for 1000ms, notification does not show up at all. With proper solution it would show up 3000 - 1000 = 2000ms (duration - hidden tab time).