One of the most discussed concepts in the world of the web design is responsive web design. Thousands of articles have been written on responsive web design and I therefore won’t discuss it in this article. However, responsive web design has an important limitation, responsive web design is for the most part based on the size of the browser’s viewport.
While this approach works well for serving up images of the right size and resolution, it isn’t ideal in all situations, video content being one example. What we really need in these cases is more information about the device’s network connection.
Imagine you’re visiting YouTube on your smartphone or tablet. You’re at home and connected over Wi-Fi. In such cases, you don’t care about the number of bytes that are being downloaded, you’re only interested in high quality video content. This isn’t true if you’re connected over a slow mobile connection. In that case, you want to see the video, the quality is secondary.
I should be clear that every developer who wants a website to be really good still has to optimize the assets it serves to allow pages to load as fast as possible. However, in the above example, serving up a high resolution video isn’t a waste of the user’s bandwidth, but an improvement of the user experience.
The Network Information API is exactly what we need to find out more about the network connection of the device.
The Network Information API provides access to the connection type the system is using to communicate with the network, cellular, Wi-Fi, Bluetooth, etc. It also provides a means for scripts to be notified if the connection type changes. This is to allow developers to make dynamic changes to the DOM and/or inform the user that the network connection type has changed.
The first release of the specification of the Network Information API was in 2001, but the API has changed several times since. As a proof of this, the current version is a mere editor’s draft, which means that it’s bound to change in the future.
Despite the changes, the use cases for this API are so interesting that it’s really worth exploring it. In this article, we’ll discuss the latest version of the specification, but we’ll also look at some of the deprecated properties and events for reasons I’ll explain later.
The current version of the Network Information API exposes a connection object that belongs to the window.navigator object. The connection object contains one property, type, which returns the user agent’s connection type.
Some of these values, such as bluetooth and wifi, are self-explanatory while others need a bit more explaining. The cellular type refers to a mobile connection, such as EDGE, 3G, 4G, etc. The other type means that the current connection type is not unknown, but it isn’t any of the other types either. The unknown type means that the user agent has established a network connection, but it is unable to determine what the connection type is.
In addition to type, the Network Information API exposes the ontypechange event. It is fired every time the type of the network connection changes.
Developers can use the Network Information API to change some features based on the current connection type. For example, we can slow down a process that takes up significant bandwidth if we detect the device is using a mobile connection. The API also lets us assign a specific class to the html element, for example high-bandwidth, in the same way Modernizr does. We can leverage CSS to change one or more properties of an element, such as the background image.
Now that we know what the Network Information API does and who we can benefit form it, let’s see which browsers support the API.
At the time of writing, the Network Information API is only supported by Firefox, using its vendor prefix, and Chrome Canary. In Chrome Canary, we have to enable the experimental web platform features flag to use the API. You can find more information in this post by Paul Irish.
As if support for the Network Information API wasn’t already poor enough, Firefox up to version 30, the most recent version, supports the old API specification. Because of this and in case you want to play with the Network Information API right now, it’s important to take a look at the properties and events exposed by the previous specification of the API.
The old specification exposed two properties, bandwidth and metered. Thebandwidth property is a double representing an estimation of the current bandwidth in megabytes per second (MB/s). The metered property is a boolean that specifies if the the network connection of the device is subject to any limitations. The previous specification also defined a onchange event to notify any listeners about changes of the aforementioned properties.
Conclusion
In this article, I introduced you to the Network Information API. In the first part of this article, we’ve discussed what the API is and what it can do for us. We also learned what properties and events the Network Information API exposes. As I mentioned inBrowser Support, the API is currently poorly supported, but this is in part due to several changes of the API’s specification.
The Network Information API is very simple to use and there are no excuses to not take advantage of the information it offers once it’s supported by more browsers. What do you think of this API? Will you use it when it’s supported by more browsers?
Original Source: http://code.tutsplus.com/tutorials/html5-network-information-api–cms-21598
Recent Comments