Detect (or forbid) game bar within browsers

Question

I'm relying on browsers full screen mode for one of my projects.

I just discovered that using the windows "game bar" (windows + G) let the users browse away without any trace. So here is my question: From within a browser, how could it be possible to detect (or forbid) the "game bar" usage.

Note: the game bar's shortcut is configurable, so listening for the key-press events of windows + G is not enough.

Answer 1

You could use document.visibilityState. From MDN:

The Document.visibilityState read-only property returns the visibility of the document, that is in which context this element is now visible. It is useful to know if the document is in the background or an invisible tab, or only loaded for pre-rendering.

Something like this:

const isVisible = () => document.visibilityState === "visible";