Javascript code for determining the networking type and connection status through JS _ javascript skills

This article mainly introduces the implementation code for determining the network type and connection status through JS. For more information, see the complicated mobile network environment in China, the developer wants to know the user's current networking method, and then gives the user a request result that conforms to the current network environment.

W3C provides a method to obtain the current network status navigator. connection; according to the Working Draft 29 November 2012 protocol specification, we can obtain the bandwidth (bandwidth, M/s) and metered values from the interface. We also provide a listener method, to monitor changes in the access environment at any time. In reality, we find that many Browsers Do not return the bandwidth value and follow the Working Draft 07 June 2011 protocol to return the value to the type (type, wifi/2g/3g/4g ).

Let's take a look at the support of various companies.

Android 2.3 + Browser	UC	Doldolphin	QQ Browser	Baidu	Firefox	Chrome	Opera Mini	Maxthon
Yes	No *	Yes	Yes *	Yes	Yes (New)	No	No	Yes

Note that no browser on the iPhone can obtain relevant information.

Through the above instructions, we found that we can still use this parameter to understand the networking of a large number of users and provide them with a better experience.
Next we will focus on the responses of various browsers.

Most browsers return an int type. The special case is the QQ browser, which returns the type name. The correspondence is as follows:

Return Value	QQ Return Value	Type
0	Unknown	UNKNOWN
1	Ethernet	ETHERNET
2	Wifi	WIFI
3	2g	CELL_2G
4	3g	CELL_3G
5	4g	CELL_4G (this value will also appear in China now, which is hspa +)
?	None	NONE

Next is a bigger special case. This is firefox. He uses the new specification and returns bandwidth. However, it is strange that if it is wifi or 3G, he returns 20, if 2 GB is returned, 0.1953125 is returned. Each time, the system returns the same regardless of the current network status. This issue will be followed up.

To provide you with a demo address: http://demo.jb51.net/js/2015/net.html
In the Demo, {type: 0} is directly returned for browsers that do not support connection, which facilitates the solution of Some browsers that do not support connection; of course, it is reasonable for browsers that do not support and can access the Internet to "unknown.

Many engineers think that this function is not supported well, but it is still not used well first. However, I think that risks can be controlled as long as errors can be handled, why not provide a more friendly experience to those excellent customers.

Today, I said that it may be a little difficult to make the backend judge speed. However, you can get the approximate speed of the user through each asynchronous request (the loading time and file size can be obtained at the front end ), then, when we provide some services selectively, we are prepared to think more in this direction.