A minimal reproduction for Android live reload config issues in Capacitor 5.7.2. See ionic-team/capacitor#7323 for the bug details.
This app was created using @capacitor/create-app
.
- You will need Node.JS
- Ensure Android Studio is installed, and that
ANDROID_HOME
is set (e.g.export ANDROID_HOME=$ANDROID_SDK_ROOT
) npm install
in the root dir
- Start the live reload server, which will run on host machine port 3000
npm run start:server
- In a new terminal, run the Android capacitor app, which is set up for live reload pointing to that server:
npm run start:android
If you want to see what these commands do, peek at package.json
You will see an ERR_CLEARTEXT_NOT_PERMITTED
error:
-
Observe that the generated
android/capacitor-cordova-android-plugins/src/main/AndroidManifest.xml
's<application>
tag is not patched to containandroid:usesCleartextTraffic="true"
-
Capacitor's cordova.ts should be adding this when run in live reload mode. It does not seem to be doing so in v5.7.2
If we manually add the clear text attribute back in, it will work:
- Add
android:usesCleartextTraffic="true"
to the<application>
tag in the main AndroidManifest.xml (not the generated one) - Run the android simulator, and observe you now see the contents of
src/index.html
- Edit
src/index.html
and see the app live reloading successfully
This is not a good workaround, however, as it is insecure.
We also cannot reliably time + manually patch the cordova android plugin AndroidManifest.xml
as we do not control when that's generated.