13 Replies Latest reply on Apr 6, 2017 7:49 AM by csreiff

    iOS 7 Status Bar not Working with PhoneGap Build

    csreiff

      I am using PhoneGap Build, not the CLI, and I'm trying to display the iOS 7 status bar.  Everything I have found through searches are either specific to the CLI, or don't work (with PhoneGap Build).  To the config.xml file, I have added the following plug-in:

       

       

      <plugin name="cordova-plugin-statusbar"  />

       

       

      and the following preferences:

       

       

      <preference name="StatusBarOverlaysWebView"   value="false" />

       

      <preference name="StatusBarBackgroundColor"    value="#FF0000" />

       

      <preference name="StatusBarStyle"                        value="lightcontent" />

       

       

      but to no effect.

       

       

      Does anyone know how to get the iOS status bar to show using PhoneGap Build?

       

       

      Thank you.

        • 1. Re: iOS 7 Status Bar not Working with PhoneGap Build
          kerrishotts Adobe Community Professional

          Do you have any other plugins installed? If so, what are they, and what versions?

          • 2. Re: iOS 7 Status Bar not Working with PhoneGap Build
            csreiff Level 1

            These are the other plug-ins I am using:

             

            <plugin name="cordova-plugin-geolocation" spec="2.4.1" />

              <plugin name="cordova-plugin-whitelist" spec="1.3.1" />

            • 3. Re: iOS 7 Status Bar not Working with PhoneGap Build
              jeffreyp64846165 Level 1

              In my case, the plugin appears to work when I view the app in the iOS emulator via PhoneGap CLI ($ phonegap emulate ios), but not when I upload and build the app in PhoneGap Build. One possible thing might be not having any "device ready" code in my html page? (I do have the link to cordova.js.)

              Screen Shot 2017-03-01 at 3.33.49 PM.jpgIMG_0605.jpg

              • 4. Re: iOS 7 Status Bar not Working with PhoneGap Build
                kerrishotts Adobe Community Professional

                You'd need the "deviceready" handler only if you're going to interface with Cordova plugins via JavaScript. The status bar plugin doesn't  need that when it initially gets its values from config.xml

                 

                Can you share your entire config.xml (minus identifying information)? Also, what does your project structure look like? That it works with the PG CLI but not PGB makes me wonder if the project structure is confusing PGB such that it doesn't read your config.xml.

                • 5. Re: iOS 7 Status Bar not Working with PhoneGap Build
                  jeffreyp64846165 Level 1

                  Away from the computer, but meanwhile ... PGB is getting some info from the config.xml—the icons, splash screen, version and description, for instance—so it's not like the entire config file is being ignored. The .zip I'm uploading contains the config.xml file, the "res" folder for the icons and splash screens, and the "www" folder. Am I leaving something out of the upload?

                  • 6. Re: iOS 7 Status Bar not Working with PhoneGap Build
                    csreiff Level 1

                    In my case, PhoneGap Build is only showing two of the three plug-ins specified in my config.xml file, so I wonder if that's why the status bar isn't working for me.  But I don't know why it wouldn't be there along with the other two.

                     

                    • 7. Re: iOS 7 Status Bar not Working with PhoneGap Build
                      jeffreyp64846165 Level 1

                      <?xml version='1.0' encoding='utf-8'?>

                      <widget id="co.getdis.energy101" version="3.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">

                          <name>Energy 101</name>

                          <description>

                              The Energy 101 mobile app, built with PhoneGap 1 Mar 2017.

                          </description>

                          <author email="support@energy101.com" href="http://www.energy101.com">

                              Energy 101 Team

                          </author>

                          <content src="index.html" />

                          <preference name="DisallowOverscroll" value="true" />

                          <preference name="android-minSdkVersion" value="14" />

                          <preference name="StatusBarOverlaysWebView" value="false" />

                          <preference name="StatusBarBackgroundColor" value="#000000" />

                          <preference name="StatusBarStyle" value="lightcontent" />

                          <preference name="AllowInlineMediaPlayback" value="true" />

                          <preference name="MediaPlaybackRequiresUserAction" value="false" />

                          <allow-navigation href="*youtube*" />

                          <allow-navigation href="*ytimg*" />

                          <plugin name="cordova-plugin-battery-status" source="npm" spec="~1.1.1" />

                          <plugin name="cordova-plugin-camera" source="npm" spec="~2.1.1" />

                          <plugin name="cordova-plugin-media-capture" source="npm" spec="~1.2.0" />

                          <plugin name="cordova-plugin-console" source="npm" spec="~1.0.2" />

                          <plugin name="cordova-plugin-contacts" source="npm" spec="~2.0.1" />

                          <plugin name="cordova-plugin-device" source="npm" spec="~1.1.1" />

                          <plugin name="cordova-plugin-device-motion" source="npm" spec="~1.2.0" />

                          <plugin name="cordova-plugin-device-orientation" source="npm" spec="~1.0.2" />

                          <plugin name="cordova-plugin-dialogs" source="npm" spec="~1.2.0" />

                          <plugin name="cordova-plugin-file" source="npm" spec="~4.1.1" />

                          <plugin name="cordova-plugin-file-transfer" source="npm" spec="~1.5.0" />

                          <plugin name="cordova-plugin-geolocation" source="npm" spec="~2.1.0" />

                          <plugin name="cordova-plugin-globalization" source="npm" spec="~1.0.3" />

                          <plugin name="cordova-plugin-inappbrowser" source="npm" spec="~1.3.0" />

                          <plugin name="cordova-plugin-media" source="npm" spec="~2.2.0" />

                          <plugin name="cordova-plugin-network-information" source="npm" spec="~1.2.0" />

                          <plugin name="cordova-plugin-splashscreen" source="npm" spec="~3.2.1" />

                          <plugin name="cordova-plugin-statusbar" source="npm" spec="~2.1.2" />

                          <plugin name="cordova-plugin-vibration" source="npm" spec="~2.1.0" />

                          <plugin name="cordova-plugin-whitelist" source="npm" spec="~1.2.1" />

                          <platform name="ios">

                              <icon height="29" platform="ios" src="res/icon/ios/e101-29.png" width="29" />

                              <icon height="50" platform="ios" src="res/icon/ios/e101-50.png" width="50" />

                              <icon height="58" platform="ios" src="res/icon/ios/e101-58.png" width="58" />

                              <icon height="72" platform="ios" src="res/icon/ios/e101-72.png" width="72" />

                              <icon height="76" platform="ios" src="res/icon/ios/e101-76.png" width="76" />

                              <icon height="100" platform="ios" src="res/icon/ios/e101-100.png" width="100" />

                              <icon height="144" platform="ios" src="res/icon/ios/e101-144.png" width="144" />

                              <icon height="152" platform="ios" src="res/icon/ios/e101-152.png" width="152" />

                              <icon height="512" platform="ios" src="res/icon/ios/e101-512.png" width="512" />

                              <icon height="1024" platform="ios" src="res/icon/ios/e101-1024.png" width="1024" />

                              <splash height="2048" platform="ios" src="res/screen/ios/splash_iPad_v-2048.png" width="1536" />

                              <splash height="1536" platform="ios" src="res/screen/ios/splash_iPad_h-2048.png" width="2048" />

                              <splash height="960" platform="ios" src="res/screen/ios/splash_iPh4_v-960.png" width="640" />

                              <splash height="640" platform="ios" src="res/screen/ios/splash_iPh4_h-960.png" width="960" />

                              <splash height="1136" platform="ios" src="res/screen/ios/splash_iPh5_v-1136.png" width="640" />

                              <splash height="640" platform="ios" src="res/screen/ios/splash_iPh5_h-1136.png" width="1136" />

                              <splash height="2208" platform="ios" src="res/screen/ios/splash_iPh6_v-2208.png" width="1242" />

                              <splash height="1242" platform="ios" src="res/screen/ios/splash_iPh6_h-2208.png" width="2208" />

                          </platform>

                          <platform name="android">

                              <icon density="ldpi" platform="android" src="res/icon/android/icon-36-ldpi.png" />

                              <icon density="mdpi" platform="android" src="res/icon/android/icon-48-mdpi.png" />

                              <icon density="hdpi" platform="android" src="res/icon/android/icon-72-hdpi.png" />

                              <icon density="xhdpi" platform="android" src="res/icon/android/icon-96-xhdpi.png" />

                              <icon density="xxhdpi" platform="android" src="res/icon/android/icon-144-xxhdpi.png" />

                          </platform>

                          <access origin="*" />

                          <allow-intent href="http://*/*" />

                          <allow-intent href="https://*/*" />

                          <allow-intent href="tel:*" />

                          <allow-intent href="sms:*" />

                          <allow-intent href="mailto:*" />

                          <allow-intent href="geo:*" />

                          <platform name="android">

                              <allow-intent href="market:*" />

                          </platform>

                          <platform name="ios">

                              <allow-intent href="itms:*" />

                              <allow-intent href="itms-apps:*" />

                          </platform>

                          <engine name="ios" spec="~4.3.1" />

                      </widget>

                       

                       

                      Screen Shot 2017-03-03 at 8.59.04 AM.png

                      My uploaded .zip has config.xml and the res and www folders.

                      • 8. Re: iOS 7 Status Bar not Working with PhoneGap Build
                        kerrishotts Adobe Community Professional

                        I'd say it's missing a lot of your plugins if PGB is only listing two, and that would be a good reason as to why the splashbar isn't behaving as expected. I suggest making sure the plugin versions you're referencing are up-to-date and removing any plugins you don't need.

                         

                        Also, I want to make sure: you are NOT uploading the plugins or platforms directories, correct?

                         

                        What does your zip file structure look like? This?

                         

                           .zip/

                               config.xml

                               www/

                               res/

                         

                        Double check that there's no config.xml buried in either res/ or www/; multiple config.xml files will confuse PGB.

                        • 9. Re: iOS 7 Status Bar not Working with PhoneGap Build
                          csreiff Level 1

                          Thank you, Kerri.  The file structure you provided, and the caution about the config.xml file(s) gave me a clue.  In my project, I have two config.xml files - one for iOS and one for Android.  Neither are at the same level as the project's root folder, since their official location for Android is \res\xml, and for iOS it's \AppName.  (They have some differences, so having two is necessary for my project.)  However, it turns out that PhoneGap Build seems to only install plug-ins that are specified in a config.xml file located at the same level in the folder structure as the root folder - as shown in your structure example.  So, I moved a copy there, included it in my .zip file, and uploaded it to PhoneGap Build.  PhoneGap dutifully installed the plug-ins referenced in that config.xml file into my PhoneGap Build account.  I then deleted that copy of the config.xml file from my folder structure. 

                          It turns out that contrary to your assertion, having multiple config.xml files embedded in the file structure does not confuse PhoneGap Build - as my project does not function properly without them, but does with them.  And, it's a quirk that PhoneGap Build only installs plug-ins when they are specified in a config.xml file located at the same level in the file structure and the root folder.  Specifying them in config files embedded in the file structure has no effect.  That's what was causing my problem.  I didn't know about the quirk.  Problem solved.  Thanks!

                          • 10. Re: iOS 7 Status Bar not Working with PhoneGap Build
                            kerrishotts Adobe Community Professional

                            There are two different kinds of project structures that PGB supports, and "config.xml" is used to determine both. For example, you can have "config.xml" and "index.html" as siblings, OR you can have "config.xml" in the parent directory and "index.html" in "www". You can also have this "config.xml" file buried pretty deeply (which supports repos of various structures), but if you have more than one (or none at all), that's where problems will arise, because you won't know which one PGB is actually using. And since file paths within the config.xml file are relative to config.xml's location, your file paths may also end up completely off if PGB uses the wrong one.

                             

                            I'm glad you've got things working, but very rarely should you ever need to split your config.xml like you're doing. The "<platform>" tags let you specify plugins and preferences specific to each platform, so you should usually be able to get by with one config.xml. If you do need completely different configurations, it would be better to have two different apps on PGB.

                            • 11. Re: iOS 7 Status Bar not Working with PhoneGap Build
                              damiend57198972

                              I am having exactly the same issue, and cannot find a way to solve it.

                              I checked and I only have one config.xml file, simple structure of the site (config and index at the root), and the plugins are correctly read form the config file when building.

                              I am building with phonegap version cli-6.5.0, and install the app for testing on an iphone 4 with ios 7.1.2

                              To manage to do that, I had to add the following line: <preference name="deployment-target" value="7.1.2" />

                              Like before, the following lines in the config file have no effect at all, but the build is working ok:

                               

                              <plugin name="cordova-plugin-statusbar"  />

                              <preference name="StatusBarOverlaysWebView"   value="false" />

                              <preference name="StatusBarBackgroundColor"    value="#FF0000" />

                              <preference name="StatusBarStyle"                        value="lightcontent" />

                               

                              I also try to used older versions of phonegap build (starting from 5.2.0) but it never worked.

                               

                              The question is: is it simply possible to have this working for iphone4, ios7.1.2 or not?

                               

                              Thanks a lot.

                               

                               

                              Here is my config.xml :

                              <?xml version="1.0" encoding="UTF-8" ?>

                                  <widget xmlns   = "http://www.w3.org/ns/widgets"

                                      xmlns:gap   = "http://phonegap.com/ns/1.0"

                                      id          = "fr.univ-lyon1.lifemapcom"

                                      version     = "1.0.0" >

                                  <!-- versionCode is optional and Android only -->

                                  <name>Lifemap_ios7</name>

                                <platform name="ios" />

                                  <description>

                                   xxxxx....

                                  </description>

                                  <author href="http://www.xx.x" email="xxx@x.x">

                                     X Y

                                  </author>

                                <preference name="deployment-target" value="7.1.2" />

                                  <plugin name="cordova-plugin-inappbrowser" />

                                  <plugin name="cordova-plugin-network-information" />

                                  <plugin name="cordova-plugin-splashscreen" />

                                  <plugin name="cordova-plugin-statusbar"/>

                                <preference name="StatusBarOverlaysWebView" value="true" />

                                <preference name="StatusBarBackgroundColor" value="#6A5ACD" />

                                <preference name="StatusBarStyle" value="lightcontent" />

                               

                               

                                  <icon src="icon.png" gap:platform="ios" width="180" height="180" />

                               

                               

                                  <gap:config-file platform="ios" parent="CFBundleShortVersionString">

                                   <string>100</string>

                                  </gap:config-file>

                                 

                                  <access origin="*"/>

                                  <plugin name="cordova-plugin-whitelist" version="1" />

                                  <allow-intent href="http://*/*" />

                                  <allow-intent href="https://*/*" />

                                  <allow-intent href="itms:*" />

                                  <allow-intent href="itms-apps:*" />

                                  <allow-navigation href="http://umr5558-treezoom/*" />

                                  <allow-navigation href="http://umr5558-ncbitreezoom/*" />

                              </widget>

                              • 12. Re: iOS 7 Status Bar not Working with PhoneGap Build
                                kerrishotts Adobe Community Professional

                                Does it work on any other iDevice, iOS 8 or better?

                                • 13. Re: iOS 7 Status Bar not Working with PhoneGap Build
                                  csreiff Level 1

                                  Thank you  again, Kerri.  I was able to combine your direction with some other information I found in documentation and forum postings on the web.  I have another question for your, but first I would like to share what finally worked for me for the sake of "damiend" and others.

                                   

                                  It's not just the preference tags in the config.xml file that are necessary in order for things to work in PhoneGap Build.  (Note, I'm not using the CLI.)  Rather, in any page you want the status bar to show up, you have to also include the cordova.js file - or a reference to it, that is: <script type="text/javascript" charset="utf-8" src="cordova.js"></script>

                                   

                                  You don't actually need the file.  It's merely a "flag" for PhoneGap Build.  PhoneGap will tailor make "the file" to suit the needs of the (your) page at build time.  Cool, eh?  The other thing needed is the "ondeviceready" event listener and associated function:

                                   

                                  document.addEventListener("deviceready", onDeviceReady, false);

                                   

                                  function onDeviceReady() {

                                  }

                                   

                                  The function doesn't necessarily have to contain anything.  It just has to be there.  The combination of these three things (preference declarations in the config.xml file, a reference to cordova.js in your source file(s) along with the "ondeviceready" code), and shazam, the status bar does its thing.

                                   

                                  Okay, Kerri, now for my other question:  I have been able to get my app icon and splash page to show up, but I can't get the settings or spotlight icons to do the same.  I am using the Legacy way of providing multiple, specifically sized (according the documentation) image files, but to no avail.  Is there some trick for these?  Thank you.