I need to monitor that the web page is always in the foreground and in focus. I have developed various controls, which work correctly on desktop. On mobile, however, they do not work, in particular if the browser window is displayed in Android multi-window mode, it is always in focus even when the user start another app of the smartphone.

What can I do?

These are some JavaScript codes I use to check that the site is in focus, on desktop browsers they work, on mobile browsers they are not completely reliable...

// check type 1
document.addEventListener( 'visibilitychange' , function() {
    if (document.hidden) {
        console.log("bye");
    } else {
        console.log("back");
    }
}, false );

// check type 2
$(document).mouseleave(function () {
    console.log("bye");
});
$(document).mouseenter(function () {
    console.log("back");
});

// check type 3
if (document.hasFocus()) {
    console.log("back");
}
else {
    console.log("bye");
}