Network Information API Lab

Easy
38
2
63.2% Acceptance

In this lab, you'll be developing a simple but practical web page that uses the Network Information API to display network related information. You will create a "Get Network Info" button. When this button is clicked, it will retrieve and display information about the user's network, such as effectiveType, downlink, rtt and saveData.

Concepts

  • Network Information API: This API provides data about the network connection a device is using. It can include general connection types, speed, and whether data saving is enabled or not.
  • DOM manipulation: In this lab, you will manipulate the DOM to display the network information on the web page.
  • Event Listeners: An important part of JavaScript, event listeners are procedures in code that wait for an event to occur, like a mouse click, and then execute a function when that event happens.

Steps

  1. Begin by setting up a basic HTML structure in your index.html file. Be sure to give it a title in the <head> section.
  2. Create a button element within the body of your HTML document. Assign it an id of getNetworkInfo and set its display text to "Get Network Info".
  3. Also in the body, create a div element with an id of networkInfoContainer. This will be used to display the network information.
  4. Now let's head over to the JavaScript part. Include a script tag at the end of your body tag in your index.html file. The source (src) for this script will be script.js.
  5. In your script.js file, start by adding an event listener to the "Get Network Info" button that listens for click events.
  6. Inside the function that executes when a click event occurs, use the Network Information API to retrieve the network information. Remember that the Network Information API is accessed through the navigator object, specifically navigator.connection. However, some browsers may require a prefix, such as mozConnection or webkitConnection.
  7. Create a string with the network information (format it according to the information you have) and set this data as the innerText of the networkInfoContainer div.

Hints

  • Keep in mind that not all web browsers support all properties of the Network Information API. Some may require prefix like mozConnection or webkitConnection, consider these cases when retrieving the connection info.