Initial mobile install - renders UI twice - is this expected?

mobile
1

I’m just learning about meteor and cordova integration, but I’m running into something I can’t explain. Sorry this is long but I wanted to make sure the explanation is understandable.

When I ran my app on on Android or iOS, I noticed that the first time I open it after it is installed, the UI renders fine but then re-renders making the UI appear to flash. If I close the app and re-open it, it does not re-render (no flash.)

I thought it was something I was doing in my code but I couldn’t figure out what, so I tried it with the sample app you get when you first run meteor create.

Interestingly it seems to happen here too. I added the Android SDK and platform, then ran the app on my device using meteor run android-device. I added a console.log() to the counter() function to show it loads more than once.

Here is the output after that app is first installed and run:

$ meteor run android-device
[[[[[ ~/web/projects/simple ]]]]]

=> Started proxy.
=> Started MongoDB.

WARNING: You are testing your app on a remote device. For the mobile app to be able to
connect to the local server, make sure your device is on the same network, and
that the network configuration allows clients to talk to each other (no client
isolation).
=> Started your app.

=> App running at: http://localhost:3000/
=> Started app on Android Device.
I20160224-09:10:25.815(-5) (android:http://meteor.local/app/simple.js:15) getting the counter.
I20160224-09:10:27.952(-5) (android:http://meteor.local/app/simple.js:15) getting the counter.

You can see that it prints out the log statement twice about 2 seconds apart.

Here is the output after the app is already installed (I’ve already run meteor run android-device once, now I’m running it again):

$meteor run android-device
[[[[[ ~/web/projects/simple ]]]]]

=> Started proxy.
=> Started MongoDB.

WARNING: You are testing your app on a remote device. For the mobile app to be able to
connect to the local server, make sure your device is on the same network, and
that the network configuration allows clients to talk to each other (no client
isolation).
=> Started your app.

=> App running at: http://localhost:3000/
=> Started app on Android Device.
I20160224-09:11:59.262(-5) (android:http://meteor.local/app/simple.js:15) getting the counter.

No second log statement because the UI only renders one time.

Interestingly, when doing this with my app, it behaves the same, but because I am running it with meteor run android-device --mobile-server the first time it renders the UI it appears to be from

android:http://meteor.local/app/client/client.js

but the second time it renders it is from

android:http://meteor.local/c06431d46ea3c8ccc8bc6e76bdfe5bb68ed30c1.js.

I presume this is coming from the server I defined with --mobile-server. Again, this only happens the first time I run the app after installing it. After that when I run the app it appears to load the UI from the server and only renders once.

So - is this expected behavior?

How can I prevent it flashing on first run of the app after install?

Thanks for your help!

2

Are you running on Meteor 1.2 or on 1.3 beta? There was a bug in 1.2 and earlier where a Cordova app would always download a new version, even if it was supposed to be identical to the one bundled with the app.

3

Good question and sorry for not including the meteor version in my question. I’m running meteor 1.2.1.

Should I upgrade to 1.3 to solve this issue?

If so, how stable is 1.3 at this point? I’m hoping to have an app in the app stores in late March / early April.

Thanks!

4

Yes, you would have to upgrade to 1.3 to solve the issue. The 1.3 beta is already pretty stable and contains quite a few improvements to the mobile support.

1 Like
5

@martijnwalraven thanks for the info. I see there are multiple betas available. I installed 1.3-cordova-beta.5. Is that the one I should be working with?

And it did fix my problem.

6

We’ve since merged the Cordova beta with the modules beta and added the new testing support. The most recent beta version right now is 1.3-beta.11. See here for more details.

7

@martijnwalraven thanks again for your help.

I’ve noticed a couple of things with this version:

  • It seems the default iOS version is 8 (based on building in Xcode). One of my test devices is iphone 4 which can’t run iOS 8 (it is on version 7.1.2.) I’d like the app to work on 4 if possible (I realize this is only about 5% of iPhone users at this point.) Is there a way to build for iOS 7.1 in 1.3beta?

  • When I run with meteor run android-device --mobile-server I’m seeing a blue screen between the launch screen and the app rendering for the first time. It seems like the launch-screen plugin isn’t working. Do you expect this?

8

With the version of Cordova iOS we upgraded to, the minimum version supported is indeed iOS 8. There isn’t much we can do about it from the Meteor side, but I also think the decision to drop support makes sense (e.g. you can’t even run the iOS 7 simulator under El Capitan any more).

I haven’t encountered the blue screen issue you describe. In my tests, the launch screen displays as expected and the content is shown immediately after it disappears. If you have a reproduction, please open a GitHub issue for it.

9

Ok - makes sense on iOS 7 support.

And I think the problem with the blue screen had to do with my server - I’m using mupx for deployment and I hadn’t deployed 1.3 based build to server. Seems good now.

Thanks again for your help.