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

Page Visibility API: Learn How to Use Browser-Based Visibility Interface

Navigation Timing API: How to Track Your Website Loading Performance

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Network Information API: How to Access Network Connection Speed Info

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

An Introduction to Firefox’s new Site Isolation Security Architecture

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

An Introduction to Firefox’s new Site Isolation Security Architecture

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

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps