Firefox on Mac OS issues CPU higth

[andgest]

Hello, I have problems with streamsaver on MacOSX. I tested Firefox 79 on 3 macs with different major OS versions on large downloads (2GB) :

• 10.13.6: No CPU problem but the download stops after 1 minute.
• 10.14.6: No indication of download in progress in browser but the CPU high. We can see that the file is downloading by observing the network data stream.
• 10.15.6: High CPU and the mac ends up crashing with reboot required (same problem on Chrome).

See below my code :

import streamSaver from "streamsaver";
import {WritableStream} from "web-streams-polyfill/ponyfill";

....

download(url: string, fileName: string, size?: number): Observable<number> {
    if (isNullOrUndefined(streamSaver.WritableStream)) {
      streamSaver.WritableStream = WritableStream;
    }

    if (isTrue(environment.useSelfHostedStreamSaverMitm)) {
      // Allow to avoid to see download from https://jimmywarting.github.io/StreamSaver.js
      streamSaver.mitm = window.location.origin + window.location.pathname.replace(/\/[^\/]+$/, "/") + "mitm.html";
    }
    const fileStream = streamSaver.createWriteStream(fileName, {
      size: size,
      writableStrategy: undefined,
      readableStrategy: undefined,
    });

    const requestHeaders: HeadersInit = new Headers();
    requestHeaders.set("Content-Type", "application/json");
    const token = this.oauth2Service.getAccessToken();
    if (!isNullOrUndefined(token)) {
      requestHeaders.set("Authorization", "Bearer " + token);
    }

    const fetchResult = fetch(url, {
      headers: requestHeaders,
    }).then(res => {
      if (res.status !== HttpStatus.OK) {
        return res.status;
      }
      const readableStream = res.body;
      const writableStream = streamSaver.WritableStream;
      // Optimized way for supported browser (like Chrome)
      if (writableStream && readableStream.pipeTo) {
        return readableStream.pipeTo(fileStream)
          .then(() => HttpStatus.OK);
      }

      // Standard way for other browser (like Firefox)
      const writer = fileStream.getWriter();
      const reader = res.body.getReader();
      const pump = () => reader.read()
        .then(result => {
          if (result.done) {
            writer.close();
            return HttpStatus.OK;
          } else {
            writer.write(result.value).then(pump);
            return HttpStatus.OK;
          }
        });
      return pump();
    });

    return from(fetchResult);
  }

Thank you in advance for your help ! :)

[jimmywarting]

Hmm, not exactly sure what it could be. One theory and issue streamsaver have is that it don't have a solid backpressure to the service worker So it could be that you are writing things too fast. This problem goes away for browser who supports transferable streams The 2nd issue is that chunks are not transferable durning the postMessage (they all get cloned)

My advice to everyone when downloading something from the server is always try to solve it using the server only instead of mimic it in service worker.

it maybe is more related to #145 if you like you could maybe try out my native file system adapter instead. It also has a way to download things via service worker (and dosen't involve any mitm) The packpressure is solved over there since the service worker can talk back to the main thread when it's ready to accept more data. and the data that are sent to the service worker is transferable instead