bug: Remote hosting - Load time/White screen for ~ 30 seconds

[malte94]

Bug Report

Capacitor Version

"@capacitor/android": "^3.6.0",
[info] Found 7 Capacitor plugins for android:
@capacitor/app@1.1.1
@capacitor/filesystem@1.1.0
@capacitor/geolocation@1.3.1
@capacitor/haptics@1.1.4
@capacitor/local-notifications@1.1.0
@capacitor/share@1.1.2
@capacitor/toast@1.0.8
[info] Found 2 Cordova plugins for android:
cordova-plugin-file@6.0.2
cordova-plugin-file-opener2@3.0.5

Platform(s)

Android

Current Behavior

When pointing to a remote server, the load time of the app is absurdly high on Android. iOS works without any issues.

The issue is most likely not related to the server, since after various DNS/Redirect testings the server works without any issues. The web app also loads fine when you call it via the https-URL on all devices on all browsers.

For the first 15 - 30 seconds (the time varies), just nothing seems to be happening.

Screenshot:

https://abload.de/img/load_time_capg2jxc.jpeg

Video:

For testing purposes, I removed the whole app and just placed a plain "index.html" with text on the server. Still, it takes forever to show just a plain HTML output. So it is definitely not related to any JS.

https://www.veed.io/view/c59c21a3-e9e2-4441-94d5-e8f36755df95

Expected Behavior

The Capacitor wrapper must load as quick as calling the hosted web app from any browser.

Additional information

I also removed the whole /android-Directory and gave it a fresh try with npx cap add android. The issue is still reproducible.

npm --version output: 8.10.0

node --version output: v16.15.0

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'id',
  appName: 'name',
  webDir: 'build',
  bundledWebRuntime: false,
  server: {
    url: "https://thesite.com",
    //url: "http://192.168.178.49:3000", --> Loads quickly on android!
    cleartext: true
  },
  plugins: {
    LocalNotifications: {
      iconColor: "#488AFF"
    }
  }
};

export default config;

[Ionitron]

This issue may need more information before it can be addressed. In particular, it will need a reliable Code Reproduction that demonstrates the issue.

Please see the Contributing Guide for how to create a Code Reproduction.

Thanks!
Ionitron 💙

[malte94]

Hey @jcesarmobile jcesarmobile,

Could you maybe briefly specify on what exactly a reproduction is needed? Or which parts of the code would be necessary to publish here?

Capacitor is used with the mentioned plugins. A fresh installation of /android and even a static index.html on the remote server also lead to huge loading times. Calling "thesite.com" in any mobile browser works without any issues.

Device: e.g. Samsung Galaxy S10

Thank you!

[jcesarmobile]

If you check the how to create a Code Reproduction link that the bot provided, it's explained there

minimal sample application that demonstrates the issue

meaning, a full sample app (source code) with the problem you are reporting that we can clone, build and run

[malte94]

Thank you @jcesarmobile

I found a way to reproduce the issue. And to workaround it.

With the following configuration, the load time is vastly.

  server: {
    url: "https://yourdomain.com",
    cleartext: true
  },

But when using the following notation, the app works fine again.

  server: {
    androidScheme: "https",
    url: "yourdomain.com",
    cleartext: true
  },

[jcesarmobile]

if you do that it should load the local assets instead of the remote assets, so yeah, there shouldn't be any delay anymore, but changes on the server won't be reflected in your app

[Ionitron]

It looks like this issue didn't get the information it needed, so I'll close it for now. If I made a mistake, sorry! I am just a bot.

Have a great day!
Ionitron 💙

[malte94]

This would probably need to be reopened, since the issue appeared again out of nowhere.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Capacitor, please create a new issue and ensure the template is fully filled out.