With technology development in the past few decades, web apps have improved from running simply on a desktop computer to a mobile phone to an IOT device. With so many different clients, using so many different types of network, there will always be a time when a web app will need information i.e. the type of network being used or the downlink speed provided by the network provider. With this thing in mind, web browsers are now shipping with this new specification called the Network Information API.
At the time of writing, only chrome for Android supported this spec. So, if you are on chrome for Android, you should be able to see the demo working properly. But in case you are unable to see the proper data due to an incomplete spec implementation, here is what you should be able to see.
Querying for navigator.connection.type would return one of these values
bluetooth |
cellular |
ethernet |
mixed |
none |
other |
unknown |
wifi |
wimax |
This is basically the type of networks that a user can be on.
Querying for navigator.connection.effectiveType would return one of these values. And their meanings.
| Effective Type | Speed | Type of data downloadable |
|---|---|---|
2g |
Very Slow |
Only Text and Small Images |
3g |
Good Speed |
Can download high quality images and SD Videos |
4g |
High Speed |
Can download HD Video and large files |
slow-2g |
Very Very Slow |
Only Text |
effectiveType can be used to know the user network speed.
All these objects in the navigator.connection API might help decide web apps with the type of resources that can be downloaded in order to provide user with a better user experience. For example, a web app might be able to decide whether to serve the user with a low quality video or a high quality video, or if a news article can be displayed in terms of text or with images.
So, without any further delay, here is the demo.
See the Pen Network Information API by Prateek Jadhwani (@prateekjadhwani) on CodePen.