I'm doing a large fetch() and I want to have a progress bar. When I return uncompressed content from the webserver, the following code works fine.

When I enable gzip on the webserver, the content-length reflects the compressed size (which is correct given the HTTP spec) and the stream that I'm reading gives me uncompressed data (which is correct according to the Fetch spec)... however the combination of these two correct behaviours means that my progress bar is useless (it reports "300% complete: loaded 1200KB [of uncompressed data] from a total of 400KB [of compressed data]")

Is there any way to either measure "how much compressed data has been downloaded so far" (to compare against the content-length header) or "how long is the uncompressed data expected to be" (to compare against the uncompressed stream I'm reading)?

    fetch("http://example.com/bigdata.json")
        .then((response) => {
            if (!response.body) return;
            const reader = response.body.getReader();
            let download_done = 0;
            let download_size = parseInt(response.headers.get("content-length"));

            return new ReadableStream({
                start(controller) {
                    function push() {
                        reader.read().then(({ done, value }) => {
                            if (done) {
                                controller.close();
                                return;
                            }
                            if (value) {
                                download_done += value.byteLength;
                                report_progress(download_done, download_size);
                            }
                            controller.enqueue(value);
                            push();
                        });
                    }
                    push();
                },
            });
        })
        .then((stream) => {
            return new Response(stream, {
                headers: { "Content-Type": "text/json" },
            }).json();
        })
        .then(function (result) {
            console.groupCollapsed("api_request(bigdata.json)");
            console.log(result);
            console.groupEnd();
        })