Nowadays the web has become more important and more powerful than ever. One of the important aspects we try to achieve when building a website is providing a good user experience.

Thankfully, today we can build web apps with native browser features that have been added over the years by the main browser vendors. Browsers have improved significantly that some features we used to code with JavaScript or import with third-party libraries are no more needed because they become native!

There are a lot of powerful JS APIs, but today I’m bringing to light my 4 favorite APIs to enhance the user experience since he or she is your client and got to be happy and satisfied with visiting your website.

Ready? let’s go （╯°□°）╯

Network API

One of the painful moments is when you have a terrible network connection and can’t access properly to the website you want, right? You probably end up giving up the website and getting annoyed with the network connection. It will be so cool if we can still browse the content of the website in a “lighter version”. The good thing is that there is already an API that can give you all the information you need about the user network quality without coding it yourself. Thus, display a lighter version of your website in need.

• Example of how it works:

<script>
	window.addEventListener("load", updateNetworkState);

	// Add event listener to update the network state
	window.addEventListener("online", updateNetworkState);
	window.addEventListener("offline", updateNetworkState);

	function updateNetworkState(){
	  //Getting the online status
	  let isOnline = navigator.onLine;

	  //Update the online status by it's HTML id
	  const networkStatus = document.getElementById("networkStatus");
	  networkStatus.className = isOnline ? "onlineState": "offlineState";
	  networkStatus.innerText = isOnline ? "ONLINE" : "OFFLINE";

	  //Check connection type with network API
	  if(navigator.connection){
	     connType = navigator.connection;
	     statusElem.innerText += " Effective type: "+connType.effectiveType+
	   ", Download speed: " + connType.downlink + "MB/s" + ", Estimated roudtrip time is: " +
	   connType.rtt +"ms";
	  }
	}
	</script>

#web-development #browsers #javascript #api #user-experience #programming