Is there a way to determine if the Javascript client is using the phone on the mobile network, not Wi-Fi?

Question

I’m trying to make the site as user-friendly as possible for phone users, which means removing several bandwidth features. In particular, I would like to download an external font if the user is on Wi-Fi, but not on 3g / 4g.

A pretty good proxy for this is the “phone or tablet”, and tablets are usually a cut-off for “good communication”. This view works, but there are 3g / 4g tablets, and there are phones on Wi-Fi, so it is not perfect.

I do not think it is possible to do better, but perhaps the collective wisdom of stackoverflow has opened the way. Is it detectable?

Answer 1

Instead of focusing on mobile devices or not, just do a bandwidth test. The only way to verify this is to download the file to your device.

Try the accepted answer here: How to determine internet speed in Javascript?

Answer 2

You can try the solution suggested in this answer , i.e. use navigator.connection.type . However, this is definitely non-standard and, apparently, it is limited only to Android devices. Also, see the MDN entry that mentions the metered property for the same navigator.connection object - this can also be useful.

For better coverage: var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection; var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;

Answer 3

The only way to do this, which I know of, which has its own problem, is to do a reverse search by the IP address of the request during the request (on the web server) and see Wireless. Two problems with this: that I don’t know whether mobile devices use a different network, and not wired networks (Wireless vs Version Fios version), and the other problem is that employees of those companies that can really be connected will display wirelessly.

Answer 4

JavaScript does not provide any connections to connection types at the network level. The best you can do is download the known test file and make a decision based on this.

If this fails, just ask the user if they prefer a high / low bandwidth setting.

Answer 5

You can try to make a network probe for very common local addresses (only for Wi-Fi), such as 192.168.1.100 and friends. Here's how:

• Create an img element using the onError handler.
• Set the src property to the address you want to "ping"
• If you receive an error message, you know that the address does not exist
• An error does not mean that an address exists.

I originally read about this technique in Ajax Security (a great book).