The compression method 'CompressionStream' in the web front-end is not supported on iOS browser

[760485464]

Self Checks

• [X] This is only for bug report, if you would like to ask a question, please head to Discussions.
• [X] I have searched for existing issues search for existing issues, including closed ones.
• [X] I confirm that I am using English to submit this report (我已阅读并同意 Language Policy).
• [X] [FOR CHINESE USERS] 请务必使用英文提交 Issue，否则会被关闭。谢谢！:）
• [X] Please do not modify this template :) and fill in all the required fields.

Dify version

0.11.1

Cloud or Self Hosted

Self Hosted (Source)

Steps to reproduce

The compression method 'CompressionStream' in the web front-end is not supported on iOS

code in public/embed.js

    async function compressAndEncodeBase64(input) {
      const uint8Array = new TextEncoder().encode(input);
      const compressedStream = new Response(
          new Blob([uint8Array]).stream().pipeThrough(new CompressionStream('gzip'))
      ).arrayBuffer();
      const compressedUint8Array = new Uint8Array(await compressedStream);
      return btoa(String.fromCharCode(...compressedUint8Array));
    }

✔️ Expected Behavior

No response

❌ Actual Behavior

No response

[dosubot[bot]]

Hello @760485464! I'm here to help you with any bugs, questions, or contributions. Let's work together to address the issue you've encountered.

The CompressionStream API is indeed not supported on iOS browsers, which can cause issues with the compressAndEncodeBase64 function in the Dify web front-end. To handle this, you can implement a feature detection mechanism to check if CompressionStream is available and provide a fallback method for environments where it is not supported.

Here's a basic example of how you might modify the function to include a check for CompressionStream and use an alternative compression method if necessary:

async function compressAndEncodeBase64(input) {
  const uint8Array = new TextEncoder().encode(input);

  if ('CompressionStream' in window) {
    const compressedStream = new Response(
      new Blob([uint8Array]).stream().pipeThrough(new CompressionStream('gzip'))
    ).arrayBuffer();
    const compressedUint8Array = new Uint8Array(await compressedStream);
    return btoa(String.fromCharCode(...compressedUint8Array));
  } else {
    // Fallback method for environments without CompressionStream
    // Example: Use a library like pako for gzip compression
    const pako = await import('pako');
    const compressed = pako.gzip(uint8Array);
    return btoa(String.fromCharCode(...compressed));
  }
}

In this example, if CompressionStream is not available, the function uses the pako library to perform gzip compression. You would need to include the pako library in your project for this fallback to work. This approach ensures that your application remains functional across different browsers, including iOS.

To continue talking to Dosu, mention @dosu.