How to know that my website is hidden when user locks the ios device?

Question

I want to know when my website is hidden on iOS. I tried using event listener for visibilitychange event:

document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === 'visible') {
    console.log('visible')
  }else {
    console.log('hidden')
  }
})

which works if I switch tabs.

But it doesn't work if I lock the device or minimizing the browser, the visibilitychange is fired twice after the device is unlocked, once for hidden and once for visible.

I also tried using blur and pagehide but they also didn't work.

Thanks