Capacitor: bug: ERR_CLEARTEXT_NOT_PERMITTED

[miqmago]

Bug Report

Android throws ERR_CLEARTEXT_NOT_PERMITTED.

Capacitor Version

npx cap doctor output:
Latest Dependencies:
@capacitor/cli: 1.3.0
@capacitor/core: 1.3.0
@capacitor/android: 1.3.0
@capacitor/ios: 1.3.0

Installed Dependencies:
@capacitor/ios not installed
@capacitor/core 1.3.0
@capacitor/cli 1.3.0
@capacitor/android 1.3.0

[success] Android looking great! 👌

Affected Platform(s)

• [X] Android
• [ ] iOS
• [ ] Electron
• [ ] Web

Current Behavior

Android does not open webview and shows ERR_CLEARTEXT_NOT_PERMITTED.

Solution

To solve the issue I had to add android:usesCleartextTraffic="true" in AndroidManifest.xml as suggested in https://stackoverflow.com/questions/54752716/why-am-i-seeing-neterr-cleartext-not-permitted-errors-after-upgrading-to-cordo

This is also described in https://developer.android.com/training/articles/security-config#CleartextTrafficPermitted:

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:usesCleartextTraffic="true"
        android:theme="@style/AppTheme">

[jcesarmobile]

This is an Android 9+ “feature” to try to force people into using https instead of http. So use https or disable it as you already did.

[miqmago]

@jcesarmobile thanks, as you said this is an Android 9+ feature to move to https. But imo, when an app is in development stage, normally one should not take care of https, otherwise would mean to open 443 port in development machine, certificate issues and much more headaches. So it makes sense to add android:usesCleartextTraffic="true" in AndroidManifest.xml.

On the other hand, when capacitor compiles the app for production (where https should be mandatory), server.url is autoremoved, so it makes sense to remove android:usesCleartextTraffic="true" in AndroidManifest.xml.

Then I see a risk for developers to leave this option in AndroidManifest.xml and push to stores with this flag. I understand that this is not a big issue, but anyway it is an issue, don't know if in the future Android is planning to penalize in some way apps using http, right now in the web it affects to SEO.

Maybe the issue is not a bug but a feature request, and also don't really know if capacitor is the responsible of changing/alerting developer of this potencial error. Maybe should be a gradle script or similar. What I think is clear is that this is a developer experience issue.

[jcesarmobile]

Capacitor doesn’t remove the server.url in production.

Having different behaviors in development and production is a bad idea, cordova ignores the certificate problems in development and if you search you’ll find dozens of questions/issue where people is confused because their app doesn’t work in production because of that.

Adding and removing it without the user knowing can lead to those kind of problems.

[miqmago]

Maybe I'm little confused then.

How one gives live-reload in development stage of a capacitor-stencil project, and removes it when wants to push to stores?
If it's to be done manually, it means many manual steps to follow before a release is that right?

On the other hand I understood that capacitor removes server.url from https://github.com/ionic-team/capacitor/issues/1678, but now I realised that it is an ionic capacitor feature. Should I use ionic capacitor for a stencil app? It's not clear for me the workflow and believe me that I've spend many hours reading stencil and capacitor docs... I would be very grateful if you please help me on this.

[jcesarmobile]

It has to be manual, unless using something that handles it for you such as Ionic CLI.
Not sure if Ionic CLI works with stencil apps, sorry.

[miqmago]

Thanks @jcesarmobile are there any plans or docs on how to use ionic cli with capacitor and stencil? Is that possible?

I know that ionic already launched react few months ago, but wondering if has done or will do the same with stencil... Feels like stencil could replace react, did I get crazy?

Right now what I've achieved is to make it to work, so I can run the app, and live reload manually but with lots of lag https://github.com/ionic-team/capacitor/issues/2119, haven't seen how to make it to work smoothly and automatically with dev/prod environments. That would make our company to rethink our development tech stack and workflow, moving from angular to stencil seems the way for next years...

[kathmontalvo]

Thanks!! I had this problem for days. Your solution reallly helped me @miqmago

[landry007]

Thanks!! i had this problem. Your solution helped me @miqmago :)

[YShane]

While this solution has been discussed on many cordova forums with there being a few config.xml specific solutions, is there a way to set said config property on the capacitor side of things?
Cheers!