Websocket connections on iPhone get lost when safari is un-focused/hidden

Question

I use a single websocket connection for my web app's notification and chat system. Everything works fine except that when using an iPhone, after closing/hiding Safari (which is actually just a hide/un-focus of the window I think) the connection gets lost and there will be no automatic re-connect after re-opening the Safari window. This might also occur on all other smartphones when hiding the browser window.

On desktop browsers this problem can't occur, as closing tab/window/browser will reload everything on the user's next visit ... But on mobile it seems to be more like:

• Lose focus/hide window -> Cancel all client/server connections
• Show window again -> Just show the rendered DOM and call Interval/Timeout functions

A solution I thought of is running an interval function every X minutes to check if a websocket connection exists otherwise create one ... This is ok, but I don't like this approach too much and was wondering if there is something I am doing wrong or missing on websockets as I used XHR Polling till now.

I use "Rails Action Cable" for my web app's websocket connections. As I use Vue.js for my frontend, so I wrote a custom package to use action cable's client side functionality instead of rail's full integration (https://www.npmjs.com/package/vue-action-cable) but I think the problem is more specific about websocket connections on mobile devices which un-focus the app window.

Answer 1

Experiencing this on an XHR polling app and a websocket app that uses Action Cable and React. The solution I did for the XHR polling was to utilize document.addEventListener('visibilitychange') and trigger on document.hidden to make a API call to the server whenever they come back to the tab. Essentially an "away" and "back" trigger. I plan to use that same trigger idea in React to then make sure the Action Cable connections are good. I can share that solution with you when it's done if you want.