Common Issues When Installing a Sencha Touch + PhoneGap App on a Mobile Device

8 min read

Originally published August 01, 2014

When building with PhoneGap and Sencha Touch or any other HTML5 mobile application framework, you will probably be doing most of your testing through a desktop browser. You usually hope that the transition onto an actual mobile device will be a smooth one but there can be quite a few tricky issues and bugs that can arise. The point of this post is to compile a few common issues people face and steps you can take to fix them.

Issue: iTunes Sync Failed to Install App

Are you trying to install an application onto your iOS device through iTunes and getting the following message when attempting to sync?


iTunes Sync Error Message
<p class="wp-caption-text">
  1 item could not be synced. See iTunes for more information.
</p>

Before you try anything else, keep in mind iTunes just likes to be weird and buggy sometimes (at least in my experience). First, just try re-installing the app and you may find that it works.

If it still does not install, then it is likely an issue with your certificate / provisioning profile. You may have forgotten to include your device's UDID in the allowed devices or made a mistake in one of the steps (which is very easy to do). Recreate your .p12 and .mobileprovision files and try again. If you need help doing that, you can take a look at this tutorial about how to create a provisioning profile and p12 for iOS.

Issue: Application changes not taking effect on an Android device

I haven't really looked into this too much so I can't say _why _it happens, but often if I update and re-install an Android application file using the following command:

adb install MyApp.apk

the changes will not take effect. If this is happening to you, try running the following command to re-install the app instead:

adb install -r MyApp.apk

Issue: Application never loads or gets stuck at the blue screen with the flashing white dots

When you're loading your Sencha Touch application to test, there's always that tense moment of waiting and wondering "will this blue screen go away or am I going to have a bad day today":

 


Sencha Touch Loading Screen
<p class="wp-caption-text">
  Default Sencha Touch Loading Screen
</p>

When testing in a browser if this happens and you check the console, you will usually see some error that's preventing the app from loading properly. If the same thing happens when you test it on a device, the same thing is probably happening.

First, try testing the same build through your desktop browser and check the console (also check the specific build, i.e the built 'production' or 'package'  version). If the same behaviour is occuring there then you're in luck. Fix it, re-install and hopefully everything will work fine now.

If there are no errors on your desktop, that probably means there is an error that is only occurring when it is installed on the device. These are a little trickier to debug. As a first step, try remote debugging with something like weinre to check if there are any errors appearing in the console. In my experience weinre has been a bit unreliable and won't necessarily show all errors that are occuring. If you can't find anything helpful in the weinre debugging information then you might have to resort to a bit of manual debugging. Here's some things to consider:

1. Are you loading in remote libraries / code that are failing to load on the device?

Try removing that code and any references to it to see if it's the problem. By default, you are not able to load 'cross origin' resources i.e: code that comes from a domain other than the one you are currently on. In PhoneGap you can get around this by adding the following line to your **config.xml **file:

This white lists all domains. You are also allowed to specifically list only the domains that you require.

2. Is the functionality you're trying to use supported?

Remember that Sencha Touch code is running through an embedded web view (a browser) whether it is installed natively or not. It could be that the browser it is executing through does not support the functionality you are trying to access. This is quite common especially if you're targeting older Android devices. This would cause the app to work fine when testing on your desktop browser (which is probably the latest Chrome or Safari) but not when it is running through the devices browser.

Issue: Some functionality works through the desktop browser but not on a device

It could be that you've tested your application on a desktop browser and everything works great, but when you install it on a device some of the functionality is broken. Just recently I ran into a weird issue when I was trying to get the Google Places API working in Sencha Touch. It would work great through the desktop browser, but when I installed it on my device tapping the suggestions would just cause the box to close and nothing to happen. It turned out there was a conflict with the autoBlurInput config in the Viewport – setting it to false allowed me to work around the problem.

There's so many different things that could be going wrong so of course you may not find a solution here. In any case I would first just recommend googling it to see if anybody else has had the same problem (they probably have). Here's a couple of things to consider in general though.

**Consider the limitations of the browser. **As I mentioned above, it could just simply be that the specific browser the application is running through does not support the functionality you are trying to use.

**Mobile devices are slower than your desktop computer. **You will probably notice a performance difference between a mobile application running through your desktop browser and one running through a mobile browser. Mobiles just do not have has much power as a desktop computer. We need to take this into consideration to keep our applications quick and responsive, but it can also create some interesting race conditions.

Your code might execute so quickly on a desktop computer that everything is done in an instant and ready to go when you need it. On a mobile though, there could be more of  a delay and if you don't handle this wait time correctly it could cause some problems. Just recently I ran into an issue where my application was freezing when I would try to view a list item on my mobile device.

The problem was that when I view a list item and then click the back button, I destroy the view we just left to save space in the DOM (one way to improve the performance of your mobile app). This worked fine on the browser, but the mobile was a little bit slower to destroy this view. What happened was that I would go back to the previous screen and choose another list item. When I try to view a list item I first check if the view already exists, if not I create it. When the code was checking if the view existed, it did, because the code from the back button press was still executing and hadn't destroyed it yet. After the check had already run, the view actually was destroyed. This caused a state in my application where it thinks a view has been created and is ready to go, but it doesn't exist anymore.

I hope this helps some of you solve issues you are experiencing but if not, feel free to leave a comment below and see if anyone is able to help. I'll update this post in future with any particularly common issues people are facing.

If you enjoyed this article, feel free to share it with others!