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

Solution 1:

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

Solution 2:

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.

Solution 3:

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.

Solution 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.