I have an issue with the start of my app on iOS and Android.
On iOS it shows a black then white screen before starting the app and on Android it just doesn’t show anything until the app opens. I’m not in Preview Mode, I’m building the app and for Android I’ve made an .apk to be sure.
As you see on Android it takes almost 15 seconds to open the app.
From here the app works great on both devices.
I’ve seen some people with similar issues here on the forum but I still couldn’t find a solution or a reason why this happens.
Also the log in the console or Android Studio doesn’t tell me anything.
I could make a minimal reproduction of this but the times for the app to open would decrease. Even in the Examples, the app does not open immediately but the delay is acceptable.
I’m afraid that if my app keeps growing, the time to open the app increases and the delay will be such that people will give up on waiting.
first, I’ll quickly dismiss the iOS part of your report, because testing on a simulator tells us nothing for a number of reasons. Give it a go on a physical device and see what happens there.
What is the Android device you are testing on? Manufacturer, model, OS version, specs…
What are the exact commands you used to build the apps? Just so we’re sure it’s proper builds.
As for reasons in general, it’s hard to suggest anything in particular without seeing your code. You should start by making sure the app isn’t doing too much heavy lifting on startup. Specifically, things like reading large files/databases have been a problem in similar cases before (there are ways to only read what’s necessary). Also, bad code architecture has been a prominent cause for general performance issues - if you put everything in a single JS file with thousands of lines, that just can’t work fast.
I showed the iOS simulator because the behaviour of a real device is the same and I didn’t have any device available at the moment. The tests were made with iPhone 5, 6s and 7.
Also, I didn’t say which Android I was testing on because this doesn’t happen on a specific device. It happens in all devices where the app was tested on.
As for the one I have been testing and that’s where I record the video: OnePlus 3, Android Nougat 7.1.1, RAM 6GB LPDDR4, Storage 64GB UFS 2.0…
I’m perfectly aware you cannot help me much without seeing the code or test the app yourself, but as of now, I’m not allowed to share the code.
But just in case this changes, can you please provide me the link to share the project?
The commands I’m using are: fuse build -tandroid --run fuse build -t=iOS -DCOCOAPODS -adebug
Answering to some of your points:
I have the app divided into pages that has a .js file a .ux file, and the larger file have about 700 lines of code.
At the beginning I only have a splashscreen with a image and a function to request some authorizations and the logic to go to the next point.
At this point, I don’t require much data to be read.
With each page I add to this structure the app delay increases a bit.
I also removed some .js files and I noticed that the delays decreased.
This tests worried me a bit, because if I add mores pages with more javascript then the delay will be bigger and bigger. It seems like it is loading all the pages and all the .js files even if they are not needed.
Is there a way that the pages and the respective .js files can only be loaded when needed?
It’s understandable that you might not be able to share the code with us. However, my suggestion is, if you have time, to try and replicate the behavior by yourself in a seperate app. This can be done by removing functionality from your project until the issue is gone, and then making an app that uses the same features of Fuse, hoping that it will also suffer from the issue.
I oberved a similar launch behaviour on iOS (but not so long, it’s depends on the Hardware). After the launch bitmap there is a moment a white screen before the app is displayed. If you have a colorful app it looks like a flickering for a moment.
I’ve made a reproduction on my app and uploaded to your dropbox as tst-app.zip. Can you please take a look at it? I really can’t figure out why this issue happens.
As testing devices I’m using a One Plus 3, Zopo Zp999, iPhone 6 and iPhone 5. The behaviour is similar in all of the devices. On Android it takes like 6 or 7 seconds to start the app and on iOS is shown the black/white screen for 5 or 6 seconds before it starts the app.
@Ana: sorry, but the project you shared can’t be run. It complains about errors in ItemPlanning and we’re in no position to hunt those down, since they’re clearly are issues with the project code itself.
Aside from that, having 47 UserEvent definitions in MainView.ux does not look too good. If not a performance issue, it sure isn’t a good architecture. Unfortunately this assumption can’t be tested before the project actually runs.
I’m sorry Uldis, but this is running. I just retested and it’s running on Preview, Android and iOS. I would NEVER upload something for you guys to see that wasn’t running. I have not updated Fuse to the last release (Fuse version 1.2.1 (build 13974)), might that be the difference?
As for the UserEvent I’m aware that maybe that’s not the best way to do it, but I couldn’t find any other way to detect events globally. I had to put them on the MainView.ux (that’s another discussion). But I believe that is not the problem because I had those since I began building this test app and it open the app fast enough. After adding the rest of the pages it started to delay with each page.
got it to work, must have been some configuration error on my machine.
Right, so this is what I found, and I’m not sure how I didn’t notice it before. All your pages on all navigation levels have ux:Name assigned on them. Which means that ALL of the application UX tree is being instantiated during app start-up.
What those pages should have defined on them instead, is ux:Template. That turns all those pages into templates that are only instantiated when they’re needed. For example, when you router.push() to a given page.
When testing, all I did was simply replacing all ux:Names with ux:Templates and the app keeps working just fine, so this seems like a non-intrusive change. My Nexus 5 was showing a loading-time improvement of at least 3x after the change. Make sure to update all of your Navigators: in MainView, LoginNavigator, MainNavigator, ProgressNavigator and maybe some more somewhere else.
Oh, and here’s a link to the Template docs, just in case. And Navigator docs, because that’s just as relevant.
I had already tried the ux:Template but then my navigation was really bad, not smooth at all.
Now, what I’ve done was trying to find a balance between ux:Name and ux:Template. It improved a lot the delay on the app on start (now is like 2/3 seconds), which may not be perfect but it’s acceptable.
On iOS is still shown a black screen when starting the app, which is not pretty. (It also shows the white screen after it but it’s like 1 second). I read somewhere that this is the “fuse launch image”, is it true? If yes, why doesn’t it show on Android and why is just a black screen?
There is no balance, you are expected to use ux:Template. If the transitions are not smooth, you have other tools to combat that: Deferred and PageFreeze=“WhileNavigating” as examples. There’s more, but what you need to use varies.
Specifically, you want to use Deferred on list items. And Freeze on pages that have animations or do a lot of loading/rendering upon activation.
Speaking of the “launch image”, that’s something you can set in XCode. Android might have something similar, but I don’t know the details.
I solved the problem with the black/white screen on iOS using the Launch Images you talked about.
The issue is that every time you make a build these images disappear and you have to add them manually. Is anything in the roadmap to add them in the .unoproj file like the app icons?
We do have an internal ticket on this, but there is no ETA on when it could get done. I’ve linked the ticket to this forum post so you’ll get notified when we get to it.
Yeah, we’re aware of the icons. In particular, there’s one for iPad and then the marketing image. I’ve now linked the tickets about these to this thread.
As for there are some more launch images to be filled - if you could list exactly which we’re missing, that would warrant logging another ticket.
As I had to add the missing icons and the launch images manually I made some documentation about it. The problem is that I only have on portrait mode, but this is what I have:
However, I think about the launch images, there’s another detail to note: Fuse only supports iOS 8 and up, so iOS 5, 6 versions of the launch images makes little sense for us.
