Connection problems when using mobile devices

[sirluckyluke]

Hello folks,

I am working on a project where I try to control servos over a web page. For this, the esp32 is set up in hotspot mode with a DNS server for name resolution and the async web server for content delivery.

Everything is working fine on my development machine (Ubuntu/Firefox/Chrome), I can connect to the esp32 and the web page is shown correctly and also a page refresh is possible. But when I try the same with my mobile phone (android 9) or my tablet (iPad / latest OS) it worked on the first try but when I refresh the page it gets stuck in the refreshing routine and nothing more happens. The weird thing is when I then try to connect from my dev machine the network manager shows an authentication error and wants me to type in the password again (which is not working then). After a hard reset, it is working in most cases till the page refreshing.
Another observation is, that the mobile devices are not really willing to connect to hotspots which are not providing internet. Sometimes my android phone and tablet are disconnecting themselves from the wifi because of no internet or they start using the cellular connection. Furthermore, I see on the webserver that the devices requesting some files like "hotspot-detect.html" or "generate_204".

Could this be some problems with the captive portal detection of mobile devices? Which need some special response from the web server? Or a special authentification routine?

I hope someone could get me some advice on how to deal with this.

[sirluckyluke]

if forgot to mention:
I using the esp32 dev module with the latest files for the async web server and core files.

[deniss1711]

Using this implementation https://github.com/boblemaire/ESPAsyncSDWebServer of the server having similar issue.
ESP32 is connected to an AP.
Chrome/Firefox/Edge all do a correct reload of the page. When page is loaded heap is back to start size.

First load of page on mobile devices (iOS/chrome) is ok when app was closed before. A reload of page ends in a stuck page and heap size is not recovering from this. ESP is not reachable from normal computer at this stage. Arduino loop is still running.

[sirluckyluke]

Sounds like the same issue...do you found a solution? As of now, I am avoiding the page refreshing by enabling caching of the content. So no solution from my side, just a workaround :)

[deniss1711]

@sirluckyluke Sorry no solution found yet. But my webserver is not sending any data after calling a large js page from the server on a chrome mobile. On all Windows browsers all is working ok.

[hjanshu]

I'm facing the same issue. I'm hosting html and js files on the on-board spiffs. The page loads without issues on windows machine but on Mobile device the page is stuck on loading.

[stale]

[STALE_SET] This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs. Thank you for your contributions.

[stale]

[STALE_DEL] This stale issue has been automatically closed. Thank you for your contributions.

[aleuarore]

Hi guys,
did you find a solution? I'm having this same problem.

[zekageri]

Chrome and other browsers are requesting some additional default things from the server after the page load such as favicon.ico or manifest.json. i found out that if i serve these files too the problem has gone.

[zekageri]

Do you have problems on just AP mode?
What's the decoded error you get?

[zekageri]

Use the esp serial monitor to check the error message when it reboots

[zekageri]

Or if it is not rebooting then serial print some line when you serve the page to determine where it stuck

[zekageri]

First of all. Replace SPIFFS with LITTLEFS. SPIFFS is deprecated and LITTLEFS is much faster and reliable.

Try it without static file serving and create an endpoint in the setup beforfe the server.begin() like this:

server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    AsyncWebServerResponse* response = request->beginResponse(SPIFFS, "/index.html", "text/html");
    request->send(response);
});

If it is working, something wrong with the path's on the static serving.
If it is not working like this, tell me.

You should define your page endpoints like this and serve the static content like images and fonts like this:

server.serveStatic("/", LITTLEFS, "/");

And handle the not found endpoint like this:

server.onNotFound([](AsyncWebServerRequest *request) {
    AsyncWebServerResponse *response = request->beginResponse(SPIFFS, "/notFound.html", "text/html");
    request->send(response);
});

Other than that actually i can't see any problem with your code.

Edit: Or try to place your wifi AP mode after the endpoint declaration something like this:

void setup() {
  Serial.begin(115200);

  if(!SPIFFS.begin(true)){
     Serial.println("An Error has occurred while mounting SPIFFS");
     return;
  }
  server.serveStatic("/", SPIFFS, "/www/").setDefaultFile("index.html");
  server.onNotFound(notFound);
  // TODO: Remove this in production!!!
  DefaultHeaders::Instance().addHeader("Access-Control-Allow-Origin", "*");
 
  // Also wifi disconnect and small delay between wifi calls ( depends on the module and the power )
  WiFi.disconnect();
  delay(50);
  WiFi.mode(WIFI_AP); // Access Point mode
  delay(50);
  WiFi.softAP(ssid, password);
  delay(50);
  // If the delay slightly improves the AP mode file serving then put 100ms delay instead.
  // Note: do not put delay at all in the loop, except if it is a separate task and you using vTaskDelay()

  server.begin();
  Serial.println("=== Server started");

}

Let's see if any of this helps

Edit 2 : If none of the above helps the problem, try with different esp moduels and different power supplies. The esp can draw significantly more amper when you working with WiFi.