How to check whether Data Saver is on or not in Mobile Chrome Browser?

Question

Website behaves differently when Data Saver option is on in Mobile Chrome Browser. What is the best way to determine whether Data Saver is enabled or not using JavaScript.

Answer 1

Now in 2018, official documentation is saying that you can detect data save option in JS like that:

if ("connection" in navigator) {
    if (navigator.connection.saveData === true) {
        // Implement data saving operations here.
    }
}

Answer 2

from the FAQ's

Can I detect if the user has Data Compression Proxy turned on?

Yes, kind of. As of Chrome 49 (Beta in Feb 2nd 2016, Estimated stable date in late March) when the user has enabled the Data Saver feature in Chrome, Chrome will add a save-data HTTP Header with the value 'on' to each HTTP Request. The HTTP Header will not be present when the feature is turned off. Use this as a signal of intent from the user that they are conscious of the amount of data that they are using and not that their connection is going through the Data Compression Proxy. For instance, the HTTP Header will be set when the user visits a site over HTTPS even though secure connections are not passed through the Data Compression Proxy.

Answer 3

As suggested in FAQ's, I have tried scanning list of Headers and check if Save-Data Parameter is there.

I am getting following Headers in Mobile Chrome,

By scanning this data, if Save-Data header is there we can assume that Data Saver is on

/* 
* This is PHP Code 
* will not work on clicking "Run Code Snippet" 
* Host this code on php server as .php file 
*/

<?php
header('Content-Type: application/json');
$headers =  getallheaders();
$datasaver = false;
foreach($headers as $key=>$val){
    if(strtolower($key) == 'save-data' && $val == 'on'){
        $datasaver = true;
    }
}

$status = array('data-saver'=>$datasaver);

echo json_encode($status);

?>