How to check whether the user has turned on the option to reduce data usage using JavaScript?

How to check whether the user has turned on the option to reduce data usage using JavaScript?

ยท

1 min read

Originally Published Here ๐Ÿš€!

This is an experimental technology still in Draft, so it may not work in all browsers.

To check whether the user has turned on the option to reduce data usage on the user's device, you can use the saveData property in the navigator.connection object in JavaScript.

// Check whether user turned on the option
// to reduce data usage
const isDataSaverTurnedOn = navigator.connection.saveData;

console.log(isDataSaveTurnedOn); // false
  • The saveData property returns a boolean false if it is turned off and true if it is turned on.

  • This API can be used to switch to use the low-quality content thus saving the user's data usage.

For better usability, it's better to check whether the Network API is available in the appropriate browsers by first checking for the appropriate connection object in the navigator object.

// check if connection object present
const connection =
  navigator.connection || navigator.mozConnection || navigator.webkitConnection;

// then check whether the user turned on the option
// to reduce data usage
console.log(connection.saveData);

See this example in JSBin.

Feel free to share if you found this useful ๐Ÿ˜ƒ.