Detect if mobile chrome's Data saving feature is enable from javascript

Question

In mobile chrome on android device, there is a setting called "Data saving" accessible from Settings > Data saving.

When enabled the behavior can be slightly different when reading media, especially video: on mobile autoplay videos are prohibited except if the video is muted but if data saving is enable muted autoplay isn't allowed anymore.

I would need a way to detect if data saving is used so I can change my video player behavior.

I know that there is a header sent in http requests: "save-data: on" But I don't know any way to read http requests header from javascript.

More info here: https://developer.chrome.com/multidevice/data-compression

Thanks for any answer.

Armstrong

See #220731 to access headers in javascript – Wanting

thanks but it concerns only response headers whereas my need is in request headers – Armstrong

@Armstrong did you ever find a solution to this ? – Saga

Answer 1

Javascript way to detect chrome data saver mode

if('connection' in navigator){
 if(navigator.connection.saveData){
  console.log(`Your save data mode is = ${navigator.connection.saveData}`)
 }else{
  console.log(`Your save data mode is = ${navigator.connection.saveData}`)
 }
}

For more details follow google developer blog post on Delivering fast and light applications with Save-Data

Baughman

Answer 2

You can detect if the user has turned on data saving mode in Chrome, Opera or Yandex by looking for a save-data request header. Dean Hume gives an example of how to detect data saving mode, though unfortunately his example uses a service worker, so it won't work on Opera Mini.

Chrome Data Saver uses a proxy, as do some other Android browsers such as Opera Mini in Extreme mode and UC Browser Mini for Android in Speed Mode.

You should also be able to look for the X-Forwarded-For header to detect if the Chrome Data Compression Proxy is being used.

Trantham

Answer 3

I just found a little solution to this. There is something with the ENV variable in PHP. I found out through some random debugging that there is a variable HTTP_SAVE_DATA in the env variable. So my code looks like this:

<?php
if ($_ENV["HTTP_SAVE_DATA"] == "on"){
  echo "Datasaver on"; 
}else{
  echo "Datasaver off"; 
}
?>

Hope it works for you :)

(you just have to echo this into an js variable and you can access it via js)

Bolden

Is $_SERVER not $_ENV: developers.google.com/web/fundamentals/performance/… – Roxane