Detect hide/leave event of mobile phone browser - javascript

I've surveyed most of the questions on the web but this still gets me confused....
My question is, how to detect hide/leave event of a website tab in mobile phone browser, my situation is NOT about closing the tab(like pressing the X button at the up-right or up-left corner), and also NOT about closing the whole mobile browser app directly.
(Previously, I have a webpage with a websocket connected to receive the encoded audio content, and then use AudioContext to play the sound)
Below are the two situations I've encountered.
When I press the HOME button and the mobile browser app hides.
When I click a url in the Messenger app or Facebook app of my iPhone, and press the Back button to go back.
the url link is opened in the in-app browser which made by Facebook directly, and when I press the back button on the left-up corner, the view jumps back to the Messenger window or the Facebook timeline.
In these two cases, I have listened beforeunload (and also pagehide event for iOS), but neither one is catched. And I have found that the websocket connection is still connecting and the audio is still playing. It seems like the whole page is still running somewhere(but you cannot see). I also tried listening to a div :visible, but it is still giving me true when I pressed the home button or leave the facebook in-app browser.
Is there still any way to detect these two kinds of situation? I want to turn off the streaming sound and also close the websocket connection.

Just found the answer....
Page Visibility API https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API

Related

how to make page stop when click other tab in electron

Let's say I have multiple tabs in chrome and current tab is on Youtube. In chrome, If I click
another tab, the Youtube still works so I can hear the sound. I want to make the Youtube stops
when I click other tab. I mean not destoying the Youtube but stop the page. whenever I come back to Youtube tab, so I can keep run the video.
It is like applications when we use our smart phones. when we click the home button, current application stops and we can reopen our application whenever we want. I wonder how can I approach this in electron.

Screen sharing freezes in Chrome on Mac Air with HTML5 MediaRecorder

I have developed an application which records screen, video and audio using HTML5 MediaRecorder. The entire process of recording works without any issues on Windows Machine. But If I access the same web application on Mac Air, I have a strange issue (Refer below scenario)
Recording without screen freeze
Open browser > Start recording. Open another application like word or notepad etc. Keep both the screens stacked side by side.
Recording (screen freeze)
Open browser > Start recording. Open another application like word or notepad etc. Make sure both applications are displayed in fullscreen mode.
It seems the recording works smoothly when the browser is in foreground. As soon as browser window goes in background and another application window is displayed, the video recording freezes but audio gets recorded.
Is there any configuration/setting that can be applied at Mac/Chrome level to ensure applications running in the background are not suspended from display rendering.
PS: The screen sharing permission dialog also doesn't display all the open windows in "Application Window" tab. It just displays chrome tab.
Update 1
The behavior is confirmed after few trials and errors. This is happening due to spaces. Each new application window is getting started in new spaces. Even after turning off the spaces from mission control, there is still a problem. If an application is viewed as full screen, it gets assigned to new display. Same happens with powerpoint presentation mode. Workaround is to make sure that press alt/option key while clicking on maximize button (no fullscreen / no presentation).

How to get JS code running on mobile while it minimized or sleep

I'm getting a trouble while running JS code in a browser.
I've got a small web page which uses HTML5 location API for tracking a user.
User opens my website, logs in, and goes to a certain page on which I'm using location API to track user's location. Everything works fine until user's phone goes to sleep or user presses "home" button to minimize browser. The same thing happens on both Android and iPhone.
Is there any way to prevent the phone from going to sleep and let JS code work while browser is minimized?
one of the way I found is using video on a page where all JS located. but another problem is - screen became always ON, which can cause battery to discharge too fast (if I turn off screen manually using power button everything stops working)..
still looking for some ideas...

Is there a onExit or onDestroy method on Phonegap 3?

Does Phonegap 3 includes a method "onExit" or "onDestroy" ? I would like to perform some actions before the app closes.
Basically, I want to kill an admob.
Well, after some exploration seems like phonegap api have no such event as onDestroy. This functionality could be implementat in some states for android, course a bit creepy, but in iOS this is not avalible anyway.
Android logic:
if user presses the home button app fires pause event, but application is not closed, so window.onunload will take no reaction. From this point phonegap app's webView doesn't recieve any event. But if user presses back button on first page or application was closed programmatically window.onunload must fire. I think there is a way to realise some kind of native callback by creating a java background process.
iOS logic:
In iOS, application can't close itself by some kind of apple sequrity statements. So app never closes untill user do this by double pressing the home button and killing the app. By some reasons apple dosen't allow apps do anything in background, excluding push notification recievement. So app can detect only it's transfer from foreground to background
I think all you have is onpause/onresume

What Javascript event gets fired when iOS Safari gets called from another app

I'm working on a mobile website / iPhone app combination. Upon entering the mobile website, I prompt the user to 'go to the app', 'download the app', or 'use mobile website'.
From various entry points to the mobile website, I'm mostly worried about verification emails and text messages, so the user will check email, follow the verification link, enter Safari, get prompted to 'go to the app' and the verification link is sent to the app for it to handle.
Now in the same session, if the user gets another email regarding the app, the user will check email again, follow a different verification link to Safari, and I want the 'go to the app' to work the same with the new link.
Some quirks are that upon entering the mobile website, the verification link is stored and the URL is switched to example.com/home. The iPhone overlay is completely separate from the rest of the site and doesn't have access to the site's storage of the verification link so the event needs to fire as soon as the site loads. This works when first loading the page, but upon re-entering the second time, I need to listen to event that triggers as soon as iOS Safari re-enters. I've tried listening to "pageshow" but by that time, the URL is already example.com/home.
I doubt the solution here is Javascript. To load any Javascript code, the page must already be downloading and <html><head> already downloaded (at least). I believe the only way to get what you want would be to do it in the backend.

Categories

Resources