Check the carefully before using this in production. This is an experimental technology Browser compatibility table The Network Information API provides information about the system's connection in terms of general connection type (e.g., 'wifi', 'cellular', etc.). This can be used to select high definition content or low definition content based on the user's connection. The entire API consists of the addition of the interface and a single property to the interface: . NetworkInformation Navigator Navigator.connection This feature is available in . Note: Web Workers Examples Detect connection changes This example watches for changes to the user's connection. connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection; type = connection.effectiveType; { .log( + type + + connection.effectiveType);
  type = connection.effectiveType;
}

connection.addEventListener( , updateConnectionStatus); var var ( ) function updateConnectionStatus console "Connection type changed from " " to " 'change' The connection object is useful for deciding whether to preload resources that take large amounts of bandwidth or memory. This example would be called soon after page load to check for a connection type where preloading a video may not be desirable. If a cellular connection is found, then the flag is set to false. For simplicity and clarity, this example only tests for one connection type. A real-world use case would likely use a switch statement or some other method to check all of the possible values of . Regardless of the type value you can get an estimate of connection speed through the property. Preload large resources preloadVideo NetworkInformation.type NetworkInformation.effectiveType preloadVideo = ; connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection; (connection) { (connection.effectiveType=== ) {
    preloadVideo = ;
  }
} let true var if if 'cellular' false Interfaces NetworkInformation Provides information about the connection a device is using to communicate with the network and provides a means for scripts to be notified if the connection type changes. The interfaces cannot be instantiated. It is instead accessed through the interface. NetworkInformation Navigator Specifications Browser compatibility NetworkInformation Navigator.connection See also Network Information API Specification ED Online and offline events window.navigator.connection Credits Source: https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API Published under licence Open CC Attribution ShareAlike 3.0

Mozilla

Network Information API: How to Access Network Connection Speed Info

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

A Quick Introduction to the Resize Observer API

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

The Noonification: Getting Your API Into Production (10/28/2022)

A Quick Introduction to the Resize Observer API

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

The Noonification: Getting Your API Into Production (10/28/2022)

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps