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

Posted on

How do I check connection type (WiFi/LAN/WWAN) using HTML5/JavaScript? – Even if we have a good project plan and a logical concept, we will spend the majority of our time correcting errors abaout javascript and html. Furthermore, our application can run without obvious errors with JavaScript, we must use various ways to ensure that everything is operating properly. In general, there are two types of errors that you’ll encounter while doing something wrong in code: Syntax Errors and Logic Errors. To make bug fixing easier, every JavaScript error is captured with a full stack trace and the specific line of source code marked. To assist you in resolving the JavaScript error, look at the discuss below to fix problem about How do I check connection type (WiFi/LAN/WWAN) using HTML5/JavaScript?.

Problem :

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

Solution :

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

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.

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.

Old question, but in searching for my own purposes, I found this — I have yet to try it and so therefore YMMV:

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

Leave a Reply

Your email address will not be published. Required fields are marked *