Capacitor: bug: android performance issue

[BerkeAras]

Bug Report

Capacitor Version

Latest Dependencies:

  @capacitor/cli: 2.2.1

  @capacitor/core: 2.2.1

  @capacitor/android: 2.2.1

  @capacitor/electron: 2.2.1

  @capacitor/ios: 2.2.1

Installed Dependencies:

  @capacitor/electron not installed


  @capacitor/cli 2.0.2

  @capacitor/core 2.0.2

  @capacitor/android 2.0.2

  @capacitor/ios 2.2.0

[success] Android looking great! �
[error] Xcode is not installed

Platform(s)

• Android 5.0.2 (HTC One m7)
• Android 10 (Pixel 2)

Current Behavior

The App is very slow on android. The iOS App is OK. Same app just with cordova is faster.

Expected Behavior

App should run fast.

Other Technical Details

npm --version output:
6.14.4

node --version output:
v12.18.0

See video for more details: https://youtu.be/z5eqC4249QM

[dwieeb]

Any chance you could provide a link to the source repos of your app for Capacitor and Cordova?

[BerkeAras]

@dwieeb Unfortunately, I cannot give a repo :(

[BerkeAras]

The slow performance is in other ionic apps too, like (for android) "Ionic 5 Starter app"

[allocenx]

I can confirm it too. I've tested on multiple android devices, quite new actually and same! Even tested on an older phone, Galaxy S8+ and same! Capacitor on Android is totally unusable...

[BerkeAras]

I can confirm it too. I've tested on multiple android devices, quite new actually and same! Even tested on an older phone, Galaxy S8+ and same! Capacitor on Android is totally unusable...

I've tested on pixel 2 xl and its very laggy. On Virtual device and real devices.

[allocenx]

Exactly, this has nothing to do with the source code itself. Even the simpler app is VERY laggy. Really, unusable ..., gonna try my luck with Cordova tho, see if I can get the same level of performance on Android as I get on iOS with Capacitor

[simonhaenisch]

It seems we're experiencing this as well, but I can't seem to reproduce it on the cheap Android phone I have (Mi A2 Lite, Android 10).

@BerkeAras @allocenx are you also using "server": { "url": "https://my-app.com" } in capacitor config by any chance?

[allocenx]

I am using the default LAN ip to serve, which is like 192.168.1.xxx:8080. It's not only on cheap android phones, I've tried on high-end ones too...

[allocenx]

@dwieeb Sorry for tagging you here as well, but this is quite urgent, android builds are really unusable...

[simonhaenisch]

So if you try without the server field, does it work? (I mean if you copy the web assets into the app bundle)

[kensodemann]

This seems like it is likely going to come down to configuration or something. We are going to need a repo for an app that demonstrates the issue. Obviously not anything proprietary you are working on (I saw someone say they couldn't give a repo, and that is likely true for your production app, but if you can reproduce this outside of that app, you should be able to easily provide that).

I have been working on updates to several Enterprise Support related demo apps. They are all Capacitor apps and are all using version 2.4.0. None of them are having performance lags on Android.

Being demo apps, none of them are overly complex, but they also are not trivial. They are a mix of tab style and side-menu style apps.

I have been testing on a Pixel 2 and Pixel 4, both on Android 10.
I have an old Galaxy Tab with Android 6. I will charge that up and test there as well just to confirm.

If someone can provide a reproduction, I will compare it to the apps I have been working on to see that the differences are.

[allocenx]

Well, I'm using quasar with capacitor to provide mobile builds, and in my capacitor config this is all i have:

{ "appId": "org.capacitor.quasar.app", "appName": "Finance Management", "bundledWebRuntime": false, "npmClient": "yarn", "webDir": "www", "plugins": { "Keyboard": { "resize": "body" } } }

[allocenx]

So if you try without the server field, does it work? (I mean if you copy the web assets into the app bundle)

Server does nothing actually. It automatically gets the ip specified using command "quasar dev --mode capacitor --target android", i select there the ip, either lan or wan one.

[allocenx]

Is it something else, i am missing for android alone? On iOS, the mobile build is butter smooth, no matter the model of the iPhone.

[BerkeAras]

On iOS it is still laggy for me, but it is better than android. On iOS something like swiping modals up and down is laggy, but on android everything is laggy. If I click a button on android, the ripple-effect is soo slow.

[simonhaenisch]

I've just opened #3485 and at the end I noticed that when using a remote server, on iOS Capacitor works correctly but on Android it looks like it runs on a web platform, not natively. Maybe that's related to these performance issues. You can check by opening the device dev tools via chrome://inspect and checking for window.Capacitor.isNative. If it's false for you guys as well, then maybe this has something to do with it.

[BerkeAras]

@mhartington What do you say to that?

[allocenx]

I've just opened #3485 and at the end I noticed that when using a remote server, on iOS Capacitor works correctly but on Android it looks like it runs on a web platform, not natively. Maybe that's related to these performance issues. You can check by opening the device dev tools via chrome://inspect and checking for window.Capacitor.isNative. If it's false for you guys as well, then maybe this has something to do with it.

Actually no..., mine is true. Just checked.

[mhartington]

Please provide a sample project to inspect.

If you cannot provide a sample repo, there's no way to isolate if this is due to capacitor or a users app itself.

As I've stated in other issues/discussions/forum posts... debugging is key here.

https://www.youtube.com/watch?v=7XgrrO1h7Wo&lc=UgwX-p0tZBTfvLeH_vd4AaABAg

Use the devtools provided by the browser and inspect your app. Any performance issues that _could_ appear are often due to the app and not capacitor.

[allocenx]

Please provide a sample project to inspect.

If you cannot provide a sample repo, there's no way to isolate if this is due to capacitor or a users app itself.

As I've stated in other issues/discussions/forum posts... debugging is key here.

https://www.youtube.com/watch?v=7XgrrO1h7Wo&lc=UgwX-p0tZBTfvLeH_vd4AaABAg

Use the devtools provided by the browser and inspect your app. Any performance issues that _could_ appear are often due to the app and not capacitor.

Oke will try to share it ASAP.

[simonhaenisch]

I've definitely noticed a difference in slowness when bundling our Stencil + Ionic PWA into the native app, vs loading it from a remote server. I think this would be reproducible with a basic app as well. I will try reproducing it with the ionic-stencil-conference-app soon.

The first thing I noticed is that opening the keyboard takes way longer when the app has been loaded from the remote server. Some logs that confirm that something is going on:

V/Capacitor/Keyboard: Notifying listeners for event keyboardWillHide
D/Capacitor/Keyboard: No listeners found for event keyboardWillHide
V/Capacitor/Keyboard: Notifying listeners for event keyboardDidHide
D/Capacitor/Keyboard: No listeners found for event keyboardDidHide
E/Capacitor/Console: File:  - Line 1 - Msg: Uncaught TypeError: window.Capacitor.triggerEvent is not a function
E/Capacitor/Console: File:  - Line 1 - Msg: Uncaught TypeError: window.Capacitor.triggerEvent is not a function
I/Choreographer: Skipped 35 frames!  The application may be doing too much work on its main thread.
I/Choreographer: Skipped 34 frames!  The application may be doing too much work on its main thread.
I/Choreographer: Skipped 35 frames!  The application may be doing too much work on its main thread.
I/Choreographer: Skipped 35 frames!  The application may be doing too much work on its main thread.
I/Choreographer: Skipped 34 frames!  The application may be doing too much work on its main thread.
I/Choreographer: Skipped 35 frames!  The application may be doing too much work on its main thread.
D/Capacitor/Console: File: https://long-orientation-mill-surveillance.trycloudflare.com/build/p-553d82ce.js - Line 1 - Msg: [ion-router] URL pushed -> updating nav /create-job root
I/Choreographer: Skipped 35 frames!  The application may be doing too much work on its main thread.
I/Choreographer: Skipped 34 frames!  The application may be doing too much work on its main thread.

(don't mind the type errors about window.Capacitor.triggerEvent, that's related to another issue #3485)

Our app has a service worker, so there's no issues with loading time of the files btw.

[mhartington]

@simonhaenisch

Please provide a sample project to inspect.
If you cannot provide a sample repo, there's no way to isolate if this is due to capacitor or a users app itself.

[simonhaenisch]

@mhartington

I think this would be reproducible with a basic app as well. I will try reproducing it with the ionic-stencil-conference-app soon.

[mhartington]

@simonhaenisch more context? Are you loading this from a remote server? Your message is not clear. Are you loading this from device as a native app? What kind of device are you using? What hosting provider (if any) are you using?

[simonhaenisch]

Are you loading this from a remote server?

Yes, the idea is to load the app from a remote server (instead of bundling it into the app). After seeing the comments in this SO question it seems like Capacitor is not intended to be used that way and the server field is just for dev purposes, but I'd like to make it work anyway.

A service worker caches the whole app on first launch so that it's available offline and has similar loading performance to a normal bundled Capacitor app. This works on web but I didn't get it to work properly with the native app yet (which is one thing I'm working on at the moment).

Are you loading this from device as a native app? What kind of device are you using?

Yes (as mentioned in a previous comment), I'm running it as a native app on a Mi A2 Lite with Android 10.

What hosting provider (if any) are you using?

Our production app is hosted on Vercel, but for testing/debugging I've been using cloudflared to tunnel an https domain to a local server (on localhost).

---

I've tried reproducing it with the stencil-ionic-conference-app but didn't have any notable issues, so I'm suspecting some native storage plugin calls now which is what I'll test next. I'll update this issue with a repro once I have one.

[mhartington]

Yeah, your situation is a bit unique here. But yeah, the server field is for testing, not for production use cases. This is actually against app store terms of service, as the content of the app could change to be anything, without being reviewed by the app store. So I would not recommend doing this unless you're building enterprise apps that won't be deployed to the app store.

As for other concerns, it seems rather specific to your setup, vs a typical setup.

[BerkeAras]

I do not use the server configuration in the capacitor config file. That is my actual config file: https://pastebin.berkearas.de/?40b34dd6310ee2ec#5MNRx9icVprtVrKEqpnmzHcyiN38RZCeANf4zRuQ7Yog.

What should I change?

[mhartington]

@BerkeAras nothing stand out there. But if this is the same app from our discussion before, I'd suggest running your app through Chrome's Lighthouse audit tool. This should provide more details into your specific use case.

[simonhaenisch]

This is actually against app store terms of service

Can you point me to the terms of service that state this cause to my latest knowledge that is not the case anymore? I've checked https://developer.apple.com/app-store/review/guidelines/ and there's nothing that indicates that it's not allowed to load the app from a remote server. The only relevant section I could find is 4.2.3 (ii):

Make sure you include sufficient content in the binary for the app to function at launch.

(which means we need to have some fallback mechanism for when the app server is unreachable but that's relatively trivial because the app is unusable without the backend service anyway)

If it was forbidden, then how are Ionic Appflow Live Updates legal? The app could also change to anything really.

[BerkeAras]

@simonhaenisch It is not allowed to change the functionality without review by apple. But I do not know how AppFlows Live Updates can be legal.

[simonhaenisch]

It is not allowed to change the functionality without review by apple

Do you have the source for that? This is pretty open to interpretation depending on how specific it is (e. g. bug fixes don't really change functionality).

The only other thing I just found on https://developer.apple.com/app-store/review/ is

Websites served in an iOS app, web content that is not formatted for iOS, and limited web interactions do not make a quality app.

But I don't think this means hybrid apps which are webapps but make use of native features (via Capacitor/Cordova/etc). IMO it shouldn't really matter whether the web part of the app is delivered as files in the app, from a server, or Appflow Live Update.

[mhartington]

This is getting off topic for the issue and is better suited for a forum post or discussion.

But the source is here

https://developer.apple.com/news/?id=09062019b

Basically, the app's code should be local to the device, and not loaded via the network.

Appflow is allowed as the web content is still part of the app binary. When an update it deployed, that is downloaded and becomes the main app content. The big key here is that the app (html,css,js) are local to the device and not fetched over the network.

[simonhaenisch]

Alright thanks for the info. I kind of find the announcement a bit contradicting to 4.7 though because it starts with "Apps may contain or run code that is not embedded in the binary" but yeah it's getting too off-topic (and the Ionic team definitely has more experience with the App Store team than me 😅).

Anyway, I'll stop working on a reproduction then since you're not planning to support this as a production use case.

[BerkeAras]

Lets come to the main topic of that issue: The bad performance.

[mhartington]

@BerkeAras

I'd suggest running your app through Chrome's Lighthouse audit tool. This should provide more details into your specific use case.

Most of the performance issues come from the front end side, not capacitor specifically. Please audit your app using things like lighthouse or other performance tools. If the app is the same one from the discussion thread, the performance numbers clearly show that the web app has some significant issues.

[BerkeAras]

@BerkeAras

I'd suggest running your app through Chrome's Lighthouse audit tool. This should provide more details into your specific use case.

Most of the performance issues come from the front end side, not capacitor specifically. Please audit your app using things like lighthouse or other performance tools. If the app is the same one from the discussion thread, the performance numbers clearly show that the web app has some significant issues.

But in that case it is not the frontend side. So many apps are slow on android. It has nothing to do with frontend in that case. I tried creating an app just with IonMenu and a IonButton which opens IonModal. That was very laggy.

[mhartington]

Then make a test case and provide that. Please provide something otherwise we're just going to go back and forth here without any resolution. If it happens in an app that just has ion-menu with a button, then it should be something you can recreate and share here on github.

If there is no test case, I'm afraid we'll have to close this issue since there isn't anything we can test and measure.

[BerkeAras]

@mhartington I am creating a repository ASAP.

[BerkeAras]

@mhartington Sorry for that late reply. Here is a repo: https://github.com/BerkeAras/Capacitor-Bad-Performance-Issue. If you directly want to install the APK: https://root.berkearas.de/app-release.apk

[mhartington]

Looking into it, there's a few things that stand out as bad practices.

1) Performance in the browser.

When running this through lighthouse before even deploying to the device, I see there's some performance issues already. This is emulating 3g network.

2) A sub-package.json and node modules in www

The project should not be setup this way. Since node_module include a lot more resource than is needed for the app. This can be avoided by having a framework that includes some build process, this is avoided and you build optimized JS.

3) A web component defined within a web component

Not sure if this is typo or mistake, but the test case has a web component defined within another web component. Not sure why that is the case, but should be avoided.

---

So there's a lot of bad practices that could be avoided and help performance, but overall Im not seeing any performance issues. And any performance issues typically would be part of the frontend (framework of choice like angular/react), not really capacitor.

If an app had performance issues, I'd expect them to be outside of capacitor as well.

Given all of this, I think we can close this issue.

[BerkeAras]

@mhartington Please reopen this issue. You should not close the issue because of this reproduction app. There are many people with the same performance problem.

1) How would you increase the performance. There is one image, and just ionic components. Isn't this an framework problem?
2) How would you do that? There is simply no example app for core-js users. There are Angular, React and Stencil examples but no example for ionic core users.
3) The web-component in web-component was a mistake, I'm sorry.

[mhartington]

@BerkeAras Please post on the forum

Github issues are for issues specifically related to capacitor.
Your comment and topics here are not specific to capacitor or related to actual issues with capacitor itself.

These are more support questions and how-to's.
Questions like these are for the forum.

https://forum.ionicframework.com

[BerkeAras]

But there is a capacitor problem. What about the comments of the other users here?

[dwieeb]

In my experience, issues with extremely vague titles attract a lot of attention from search engines because they're easy terms to search. Also, Google prefers issues with lots of comments (this one has over 40 already).

These issues are for specific bugs/features that are actionable. I'm not even seeing it narrowed down to an issue with Capacitor or the Ionic Framework or your app, yet. However, Capacitor is over two years old and has thousands of successful apps deployed on the App Store and Play Store. I think we'd hear a bit more from users if they were experiencing "very bad performance". Debug and uncover the issue, then post a reproducible set of steps to help us analyze the issue if it's the fault of Capacitor or Ionic Framework. It is rare for @mhartington to devote so much of his time to helping people uncover issues like this.

Use the Ionic Forum for community support on Ionic Framework. Use this repo's Discussions for community support on Capacitor. If you're on a team building a mission-critical app and need expert advice, our Enterprise-tier Advisory services are available. Our sales team is always willing to talk.