How do I check connection type (WiFi/LAN/WWAN) using HTML5/JavaScript?

Question

I wish to tailor a particular website to a low bandwidth version if the client is connected via WWAN (metered) connection or otherwise.

The connection type is important for the site to know if it should provide a rich experience or a bandwidth efficient experience. My desktop runs on a metered connection and in the future, more desktops will be connected via metered cellular networks (including Windows 8 tablet PCs), efficient web-apps should respect that a user might not require high detail assets on a pay-per-byte-connection.

How do I check if the client is connected via WiFi/LAN/WWAN using HTML5/JavaScript?

NOTE : I do not wish to explicitly check for browser headers (which is not really a solution for desktop browsers that can connect to the internet via multiple methods).

Answer 1

You can't. The information on how a client is connected (i.e., which technologies it uses, if it is pay-per-byte or a flatrate) to a server is not public. You might be able to get a trace route (with all problems that are connected to tracing), if that helps you, but that information won't be accessible JavaScript.

What can do with JS is simple bandwith testing. Download a file of known size via XHR, and measure the time that needs.

The pay model of a connection is absolute private data. Neither will it be sent along to servers on the internet, nor is it available to a loaded website. If you need this information to offer the client a custom app, ask the user directly. He will tell you if he wants.

---

Yet, wait. Latest Chrome and Firefox can be set (user preference) to provide that data on the experimental navigator.connection object.

Also, for developing Metro apps, Windows offeres such information on the Windows.Networking.Connectivity API, see this tutorial.

Answer 2

Maybe you are approaching it in the wrong way. Have a look at the Gmail model. They have a rich client that the user can opt out of if the page is taking a long time to load. The standard client is much lighter and uses a more "traditional" web design.
Trying to automatically detect things that are not meant to be can take you down a very deep rabbit hole.

Answer 3

See navigator.connection (prefixed). This API exposes information about the bandwidth of the client.

Answer 4

Old question, but in searching for my own purposes, I found this -- I have yet to try it and so therefore YMMV: https://github.com/ashanbh/detectClientSpeed.

The underlying notion of measuring time to download an asset to derive bandwidth information is subjective and not necessarily consistent, but short of native platform API for iOS/Android, this is not a bad option. A lighter alternative may be to measure ping times to something like google.com.