PhoneGap Build News: Google, Icons and Splashscreens

Breaking news – PhoneGap has just announced that PhoneGap 6.0.0 is now being used by PhoneGap Build. Here’s the announcement:

http://phonegap.com/blog/2016/02/09/phonegap_6_now_on_build/

it’s still too new for us to say what difference it will make.

To use it with AppStudio, put ‘cli-6.0.0’ into PhoneGap Version in Project Properties.

Today, a roundup of news having to do with PhoneGap Build and AppStudio. As usual, let us know if you figure out solutions (or find more problems).

Google Play Store

Users with apps compiled with PhoneGap Build are getting this message from Google:

Your app(s) listed at the end of this email utilize a version of Apache Cordova, an open-source mobile development framework, that contains one or more security vulnerabilities. If you have more than 20 affected apps in your account, please check the Developer Console for a full list.

*Please migrate your app(s) to Apache Cordova v.4.1.1 or higher as soon as possible and increment the version number of the upgraded APK. *BeginningMay 9, 2016, Google Play will block publishing of any new apps or updates that use pre-4.1.1 versions of Apache Cordova.

The vulnerabilities were addressed in Apache Cordova 4.1.1. If you’re using a 3rd party library that bundles Apache Cordova, you’ll need to upgrade it to a version that bundles Apache Cordova 4.1.1 or later.

To confirm you’ve upgraded correctly, submit the updated version to the Developer Console and check back after five hours. If the app hasn’t been correctly upgraded, we will display a warning.

The solution is simple in many cases: rebuild your app in PhoneGap Build and resubmit it. It will be rebuilt using the latest PhoneGap libraries and Google will be satisfied.

However, there can be complications. PhoneGap has made many changes in the past months, some of which will affect your apps. Here are some of the things which can happen.

  • If your app hits external websites, you’ll need to white list them. See PhoneGap: Important change to configxml.
  • Change to how PhoneGap stores its plugins: They are now stored in npm. See PhoneGap Build: npm plugins.
  • Versions of plugins have become important: The main PhoneGap libraries are now Version 5.0. PhoneGap Build is still Version 4.1.1. Some plugins now require Version 5. By default, PhoneGap Build uses the latest version, even if it is not compatible with PhoneGap Build. The solution is to make the version explicit in your configxml. For example:
    <gap:plugin name="cordova-plugin-media" source="npm" spec="1.0.1" />
    
  • The official Barcode plugin appears to be broken at this time. While PhoneGap are working on a replacement, they have a temporary plugin. It also does not work. There are a number of other plugins – let us know if you have found a workaround.
  • Camera also has problems. It might be possible to fix this by using a previous version, but the version numbers don’t seem to be documented.

Icons

Some users report that their custom icons are gone when they build using the latest PhoneGap. Here’s what seems to work currently:

  1. Make icons in all the required sizes. There’s a handy free utility at resizeappicon.com which can make them all for you in one step.
  2. Organize them in your project folder like this:
    Screen Shot 2016-02-10 at 9.33.47 AM
    The names for the files do not matter, so long as they are the same as in your configxml. For Android, some people prefer to call 72.png (a 72×72 icon) by its size: hdpi.png.

  3. Put the following lines in your PhoneGap configxml (in Project Properties):
    <icon src="{icon}" />
    
    <platform name = "ios">
      <icon src="icons/ios/icon.png" width="57" height="57" />
      <icon src="icons/ios/icon-72.png" width="72" height="72" />
      <icon src="icons/ios/icon_at_2x.png" width="114" height="114" />
      <icon src="icons/ios/icon-72_at_2x.png" width="144" height="144" />
    </platform>
    
    <platform name="android">
      <icon src="icons/android/72.png" gap:density="ldpi" />
      <icon src="icons/android/160.png" gap:density="mdpi" />
      <icon src="icons/android/240.png" gap:density="hdpi" />
      <icon src="icons/android/320.png" gap:density="xhdpi" />
    </platform>
    
  4. Put the following lines into your manifest (in Project Properties) so the files are included with your project:
    icons
    splash
    
  5. Set your icon (in Project Properties) to icons\android\192.png.

If you have done all these steps properly, icons should appear in your PhoneGap Build app.

Splashscreens

Splash screens, at least on Android apps built with PhoneGap Build, seem to be broken. Here are a couple of threads:

http://community.phonegap.com/nitobi/topics/splash-screen-use-case-examples-needed

http://stackoverflow.com/questions/35037263/phonegap-splashscreen-doesnt-work

If you manage to get splash screens working with your app, please let us know!