Keep WebSocket alive in Mobile Safari - javascript

Is it possible to keep a html 5 web pages WebSocket connection open in Mobile-Safari once the screen is locked?
I want to send my users continuous updates throughout the day and it seems silly that their screens should always have to be unlocked to receive those notifications.
Are there any other options?

I don't think it's possible to keep the connection open while the browser is in the background, or when the screen is locked, the reason being that the app is essentially frozen in memory. Here's a quote from a similar question:
the reason you cant keep a network socket open, is that without your app jumping to the foreground when it receives a connection, it cannot respond to network traffic(because if it is not in the foreground its memory content is frozen).
However, I did find this page on Push Notifications for Websites that shows you 'how to sign up your users to receive notifications even when your site is not running in Safari'.
There are some other options: if you want to send continuous updates, you could write an app and either follow the instructions on Apple's site to keep a socket open permanently, or you could configure the app to implement Push Notifications.
I'm sorry I couldn't find a quick fix, but I hope at least one of these options works for you!

I have found a hacky way to keep WebSocket alive in Mobile Safari.
Basically it's the same solution as for this question.
Create an infinity looping audio file to keep Javascript running:
<audio loop src="http://www.sousound.com/music/healing/healing_01.mp3"></audio>
Note: some user interaction is required to initiate the audio file.
It would be nice if a WebSocket kept the browser alive in the same manner as an audio or video file.
PS this also works on Android.

Related

Is there a way to keep my React JS PWA (Progressive Web App) running in background?

I coded a Chatting App and a Alarm clock App in React Js and they're working fine in foreground (while the apps are opened on screen). But I need a way to keep them running in the background to check for latest messages or to play the alarm sound. (Like clock app in phone or WhatsApp/Facebook)
Does anyone has solution?
I can't seem to find any solution, either by myself or Internet.
If you are targeting mobile devices, the best solution you have is to run a service worker, which can execute code in the background and show notifications. There are limits to the APIs available to a service worker, so playing a sound might not be possible.

How to debug WebSocket / Server Sent Events reconnections on desktop?

I am developing an app that uses Server Sent Events (SSE - basically one-way websockets). If the user uses the site on their mobile chrome browser and then tabs out for about a minute, the SSE connection breaks. If the user then tabs back into the site, it doesn't refresh the page (this is good). But I still need to re-establish the SSE connection so that the server can resume sending messages to them without a refresh.
I'm trying to debug my implementation but having to do it on mobile is very tedious. I have to grab my phone, refresh the page, then tab out, wait 1 minute (so the connection can break), and then tab back in to determine if my code for re-establishing the connection worked properly.
I would much rather be able to debug this on desktop, but I haven't found a way. I have tried the following:
Tried 5 different Chrome extensions for sleeping a tab. Unfortunately, when you navigate back into the tab it just refreshes the page rather than resumes it.
Tried using USB Debugging, but the desktop keeps the tab open at all times even if you tab out on mobile, so the tab never sleeps.
Tried running debugger; in the Chrome Developer Tools console, but even if I let the Javascript sit with its execution frozen for 5+ minutes, it never breaks the SSE connection, so I can't test if reconnecting works.
Tried using an extension to kill the internet for Chrome, but miraculously, this still maintains the active websocket/SSE connections. Apparently Google engineers have deprioritized this effort?
Basically, I am looking to simulate the behavior that happens on mobile when you tab out of your web browser, wait a minute, and then tab back in (the Javascript execution is frozen, the SSE connection is broken after a minute or so, and then tabbing back in resumes Javascript and attempts to reconnect the SSE connection).
Is this possible?
I think that best change you have by emulating your android device. You can do so by installing android studio from https://developer.android.com/studio and then here you have all you need to start and manage your virtual android env https://developer.android.com/studio/run/managing-avds
This it the way I debug my whole mobile development
The most obvious solution to me would be to attach a listener that tracks the events related to tab activation and build some custom solution upon that.
Simply:
window.onfocus = () => {
// Restore SSE session
};
window.onblur = function () {
// Inactive
};
Just for info, SSE is a different protocol from websockets.
In case you are interested in using websockets implementation, I suggest the following library which works very well in my experience: https://www.npmjs.com/package/#stomp/stompjs
Stomp is an abstraction over the websocket protocol, but it also means you would need to implement this on the server side as well.
You can use the chrome://discards to freeze your tab.
You should close and restore the connection based on the Page LifeCycle events.
You Can Try to use pause execution
goto:
Chrome javascript console (Ctrl+Shift+J) > sources > pause script (press f8)
This simulates like a mobile tab switching so you can debug easily
I think this is the simple and easy solution. thanks

Progressive web apps and Web socket connections in background

What should be the expected behavior when I add my webpage to home on Android device and my page contains a websocket connection. Should it still gets updates even in the bakground?
Based on my quick demo, it stops receiving updates when in the background. Also i dont have a service worker hooked up yet, its just opens up in full screen as a pwa.
Service Workers live for a limited amount of time (on the order of 5 minutes). They can not maintain persistent connections like WebSockets.

Does service worker runs on background even if browser is closed?

I see push notification for Facebook web in chrome only when I open chrome. I know that this notification are sent through service worker. I am wondering whether this background sync goes on even though browser is closed or only on opening chrome only these service-worker sync process get started and start sending push notification.
First thing to say is this depends somewhat on the platform. My understanding of chrome is:
On desktop platforms like windows and Mac OS X the browser needs to have some background process running for a service worker to be able to run. On Mac OS X this is quite easy to detect as the browser can have no windows open but the browser still has the glowing dot beneath it.
On mobile platforms it's easier to listen for events and handle them in an efficient manner, so in these cases the platform can wake up the browser which will then handle any corresponding events.
The above applies to any service worker api's.
On Desktop: If the browser is completely closed then service workers can not run and will not dispatch any events (i.e. no push or background sync events)
On Mobile: The events will still be dispatched (i.e. background sync will trigger when the users device comes online and push will be received and cause a push event).
I don't think service worker will be able to run if browser is closed. Because service-worker is able to send push notification only after I open the browser. If it is running in the background then it could have send notification even after closing browser also.
Little offtopic but it is possible to write Chrome extension where background script can run if Chrome is allowed to run in the background (configurable in settings). It can also use GCM.
In the context of receiving push messages on desktop, you will receive
messages when the browser is running, i.e. has the marking underneath
the icon.
This means the browser can have no windows open, and you'll still
receive the push message in your service worker, because the browser
in running in the background.
The only time a push won't be received is when the browser is
completely closed, i.e. not running at all (no marking). The same
applies for Windows, although it's a little trickier to determine
whether or not Chrome is running in the background.
source https://web.dev/push-notifications-faq/#why-doesn't-push-work-when-the-browser-is-closed

Cross-window/tab in-browser notifications with JavaScript

I am working with a website having a chat functionality (think Facebook chat).
I'd like to play a notification tone when a new message arrives. However, the user may have multiple tabs opened and the message arrives to the multiple tabs, as the chat session is multiplexed across different browser tabs/windows.
How to determine
If a browser has many tabs (windows) open for the same website
When a new message arrives which of the tab(s) should play a sound effect
I am aware of the Notifications API, but I'd like to solve this problem in backwards-compatible manner. Also if there are any related JavaScript libraries I would like to know about them.
You can use localStorage for such purposes. Data in localStorage is shared between all windows (tabs or iframes) with the same origin. It also can notify your application about changes in localStorage.
See IWC library. I think it will help with your tasks.

Categories