Hello everyone,
I've developed a text adventure game using AI Studio and deployed it at: <URL Removed by Staff>
I'm encountering a critical issue that seems to be platform-specific.
Problem Description: The game runs perfectly on desktop browsers (e.g., Chrome on Mac/PC). However, when I open the game on an iPhone (either Safari or Chrome), it fails to initialize and returns a 502 Bad Gateway error. Error Message: Here is the exact error returned on the iPhone:
Error: Failed to initialize game with Gemini: got status: 502 . {"error":"Proxying failed","details":"ReadableStream uploading is not supported","name":"NotSupportedError","proxiedUrl":"https://game.innotechlab.org/api-proxy/v1beta/models/gemini-2.5-flash-preview-04-17:generateContent"}My Analysis: My hypothesis is that this issue is related to the server-side architecture, possibly within Google Cloud Run.
The error detail ReadableStream uploading is not supported strongly suggests that there's a proxy layer handling the Gemini API calls.
This proxy appears to be incompatible with the ReadableStream requests that are likely being sent by the mobile browser, while the desktop browser might be using a different request method.
Steps to Reproduce:
1. Open <URL Removed by Staff> on a desktop browser (works).
2. Open the same URL on an iPhone browser (fails with the 502 error).
Could anyone offer some insight into this? Is there a known limitation with the proxy used in this environment, or is there a way to configure it to support streamable requests? Thank you for your time and help!
================ updated 06/13/2025 ==================
Hello everyone,
A quick update on this. I originally found this bug by chance while just exploring what AI Studio could do. After my first post, I got busy with other projects. However, I checked back today and was surprised to see this topic has over 500 views. Clearly, this is a significant issue affecting many of us, so I felt it was important to really dig in and find a definitive answer.
After going down the rabbit hole on this frustrating 502 error that specifically affects mobile browsers, I've managed to piece together the entire puzzle. For everyone experiencing this, I'm happy to share a detailed breakdown of the root cause.
This post will hopefully save you a lot of time and provide a clear explanation for the Google Cloud team to address.
TL;DR (The Short Version)
The problem is a two-part issue originating from how AI Studio deploys apps:
Client-Side: AI Studio provides a serviceworker.js file that intercepts Gemini API calls. On modern mobile browsers, this service worker creates a streaming request (using duplex: 'half' and ReadableStream).
Server-Side: The default Cloud Run container image (us-docker.pkg.dev/cloudrun/container/aistudio/applet-proxy) that AI Studio uses for its proxy does not support these streaming requests (Transfer-Encoding: chunked).
The server-side proxy fails, and the client-side service worker correctly reports this failure as a 502 Bad Gateway error.
The Deep Dive: How I Found The Culprits
Part 1: The Server-Side Suspect – The applet-proxy
Like many of you, my initial investigation pointed towards the server. My hypothesis was that some proxy layer in the Cloud Run environment was incompatible with requests from mobile browsers.
After some digging, I identified the likely Docker image used by AI Studio for these deployments: us-docker.pkg.dev/cloudrun/container/aistudio/applet-proxy
This proxy seems to be the component that chokes on the specific type of request sent by iOS/mobile browsers, leading to the ReadableStream uploading is not supported detail in the error message. But why were mobile browsers sending this specific type of request? That led me to Part 2.
Part 2: The Client-Side Initiator – The serviceworker.js File
This was the "Aha!" moment. I discovered that our web app is being controlled by a serviceworker.js file, served automatically with the application deployed from AI Studio.
This service worker's primary job is to intercept any requests made to (URL Removed by Staff) and reroute them to our own Cloud Run instance at the /api-proxy/ path.
Here is the most critical piece of code from that file:
JavaScript
// ... inside the 'fetch' event listener ...
const requestOptions = {
method: event.request.method,
body: event.request.body, // The original ReadableStream body
// ... other options
};
// This is the smoking gun!
if (event.request.method !== 'GET' && event.request.method !== 'HEAD' && event.request.body ) {
requestOptions.duplex = 'half';
}
const promise = fetch(new Request(proxyUrl, requestOptions));
The duplex: 'half' option explicitly tells the browser's fetch API to make a streaming upload. This is what creates the ReadableStream body and Transfer-Encoding: chunked header that the server-side applet-proxy cannot handle.
Conclusion: The Complete Failure Sequence
Now we can see the full, end-to-end chain of events:
API Call: Our app's code calls a streaming Gemini function (e.g., streamGenerateContent).
Service Worker Intercepts: The serviceworker.js on the client browser catches this outgoing request.
Request is Rebuilt for Streaming: The service worker creates a new request destined for our /api-proxy. It deliberately makes this a streaming request by using duplex: 'half'.
Proxy Server Fails: The applet-proxy container on Cloud Run receives this streaming request, cannot process it, and fails.
Service Worker Reports the Error: The service worker's .catch block catches the failure from our backend and, as programmed, generates and returns the 502 Bad Gateway error with the details we've all been seeing.
To the Google Cloud Team:
The evidence strongly suggests that the us-docker.pkg.dev/cloudrun/container/aistudio/applet-proxy image needs to be updated to correctly handle HTTP requests with Transfer-Encoding: chunked. Fixing this incompatibility in the default proxy would resolve this issue for all developers deploying from AI Studio.
Hope this detailed analysis helps everyone who has been stuck on this problem!
Best,
Bob
LinkedIn
Twitter
