Ionic 5/Capacitor ERR_CLEARTEXT_NOT_PERMITTED in Android

user_7004388 0
Viewed 12844

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.

error-message

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)
capacitor ionic5 ionic-framework android
10 Answers

Add this to you AndroidManifest.xml in the application element

<application
    android:usesCleartextTraffic="true"
user_1223130

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

user_43062570

You can allow cleartext traffic in the Web View by enabling it on the capacitor.config file, by adding the below code

server: {
  cleartext: true
}

Build your project to see the changes

ionic capacitor build android
user_12976420

This post helped me find the solution to my problem.

I removed the field server in the capacitor.config.json file to make it work.

"server": {
    "url": "http://localhost:8100"
}

Now my capacitor.config.json looks like 

{
  "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"
    }
  }
}
user_70043880

Add this code into capacitor.config: server: { cleartext: true }

user_61950530

just run this command :

ionic capacitor run android -l --ssl
user_92129770

While solutions above might work, it is also worth checking if your web assets were correctly copied to the android/app/src/main directory as the same net::ERR_CLEARTEXT_NOT_PERMITTED error will be raised due to missing index.html.

In some cases, e.g. when cap sync cannot delete the previous assets directory, files are not copied correctly, but process does not exit with error.

user_18121790
user_66161060

Go into capacitor.config.json and add the cleartext: true prop:

"server": {
  "cleartext": true
}

then, run npx cap copy, start the server, re-compile and run the project from your IDE (Xcode/AndroidStudio) again.

user_55879330

Create a file under android>src>main>res>xml>network_security_config.xml

<?xml version="1.0" encoding="utf-8"?>
  <network-security-config>
     <domain-config cleartextTrafficPermitted="true">
     <domain includeSubdomains="true">192.168.1.208</domain>
     </domain-config>
  </network-security-config>

then in your AndroidManifest.xml inside application tag add

android:networkSecurityConfig="@xml/network_security_config"

user_58614190
Related