Ionic 5/Capacitor ERR_CLEARTEXT_NOT_PERMITTED in Android

Question

I'm using Capacitor for building the Ionic app. These are the following commands run in order to open the android app in Android Studio.

npx cap add android
ionic build
npx cap copy
npx cap open android

In Android Studio, I ran the build and click on Run after which I see the error net::ERR_CLEARTEXT_NOT_PERMITTED in my device. I have seen various posts having the same error but those are with Cordova build. In my case, I'm not using Cordova for preparing the android app.

Here are few excerpts from my Ionic App.

capacitor.config.jsonfile

{
  "appId": "com.abc",
  "appName": "abc",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "www",
  "cordova": {
    "preferences": {
      "ScrollEnabled": "false",
      "android-minSdkVersion": "19",
      "BackupWebStorage": "none",
      "SplashMaintainAspectRatio": "true",
      "FadeSplashScreenDuration": "0",
      "SplashShowOnlyFirstTime": "false",
      "SplashScreen": "none",
      "SplashScreenDelay": "0"
    }
  },
  "server": {
    "url": "http://192.168.1.208:8100"
  }
}

I also see this error in LogCat of Android Studio

W/cr_AwContents: Application attempted to call on a destroyed WebView
    java.lang.Throwable
        at org.chromium.android_webview.AwContents.a(PG:127)
        at org.chromium.android_webview.AwContents.a(PG:209)
        at com.android.webview.chromium.WebViewChromium.evaluateJavaScript(PG:8)
        at android.webkit.WebView.evaluateJavascript(WebView.java:1113)
        at com.getcapacitor.cordova.MockCordovaWebViewImpl$1.run(MockCordovaWebViewImpl.java:203)
        at android.os.Handler.handleCallback(Handler.java:873)
        at android.os.Handler.dispatchMessage(Handler.java:99)
        at android.os.Looper.loop(Looper.java:193)
        at android.app.ActivityThread.main(ActivityThread.java:6923)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:870)

Answer 1

Add this to you AndroidManifest.xml in the application element

<application
    android:usesCleartextTraffic="true"

Answer 2

When you specify the server in your Capacitor config, you should set server.cleartext to true to prevent this issue from happening. Example:

{
  "appId": "com.abc",
  "appName": "abc",
  "npmClient": "npm",
  "server": {
    "url": "http://192.168.1.208:8100", 
    "cleartext": true
  }
}

This is not very well documented - the only place I found this configuration being used was on https://capacitorjs.com/docs/guides/live-reload