Mobile web mechanism that determines user leaving web page or locking screen

** This job is about designing a mechanism to solve a single technical problem, not developing an entire app. Please read the spec below carefully.** I'm working on a project that will mainly run in mobile browsers. I want to detect whether a user leaves the web page (i.e. go back to home screen, switch to other apps or switch to another browser tab). The problem is that I cannot find a way to distinguish whether the user is locking the phone screen or leaving the browser app (e.g. the [login to view URL] event has the same behavior in both cases). I'm looking for an experienced web/mobile developer who can find a way to solve this problem. ## Spec Extracted project code is available in the attachments ([login to view URL]). Please edit `[login to view URL]` so the behaviors would match the following cases (you should refresh the webpage before each case to go back to the initial state where the background is green): 1) Lock the screen, wait for 1 minute then unlocks the screen, the background color of the web page should stay green. 2) Leave the browser app, wait for 10 seconds then opens the browser app again. The background color of the web page should be changed to red. 3) Switch to another app directly (leaving the browser app), wait for 10 seconds then opens the browser app again. The background color of the web page should be changed to red. 4) Switch to another browser tab (not leaving the browser app), wait for 10 seconds then opens the browser app again. The background color of the web page should be changed to red. Please run your prototype on real devices and make sure it works both in the built-in browsers of Android and iOS platform. Then send the demo video to me after applying for this job. ## Payment As mentioned in the above section, once your proposal is accepted, please submit a demo video of your prototype. If that works well, please hand in the code of the prototype and once I have my in-house developers verify it, you will get paid 100%. Your implementation MUST pass ALL test cases mentioned above in order to get paid. ## Requirements - System requirements: Your solution should work on (including but not limited to) Android 5.0+ and iOS 10.0+ devices. - Browsers: Android built-in browser. iOS Safari app. - Other requirements: The solution should not incur a huge network/CPU/power consumption. It's okay if the solution needs to do things like playing silent audio, obtaining Geo location though.