Phonegap app works in IOS background - ios

I have a music Phonegap app. When playing a music, I click the Home button, then the music stops.
Is there anyway that even if the home button is clicked, the Phonegap will still run normally?
Thank you for your suggestion in advance!!
I am using Phonegap build and my config.xml is as below.
<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.myMusic.myMusic"
version = "1.0.15">
<name>MyMusic</name>
<description>
MyMusic
</description>
<gap:platform name="ios" />
<gap:platform name="android" />
<preference name="permissions" value="none"/>
<preference name="phonegap-version" value="3.1.0" />
<gap:plugin name="de.appplant.cordova.plugin.background-mode" version="0.5.0" />
<gap:plugin name="org.apache.cordova.camera" version="0.2.9" />
<gap:plugin name="org.apache.cordova.media-capture" version="0.2.8" />
<gap:plugin name="org.apache.cordova.battery-status" version="0.2.7" />
<gap:plugin name="org.apache.cordova.device" version="0.2.8" />
<gap:plugin name="org.apache.cordova.network-information" version="0.2.7" />
<gap:plugin name="org.apache.cordova.dialogs" version="0.2.6"/>
<gap:plugin name="org.apache.cordova.splashscreen" version="0.2.7" />
<gap:plugin name="org.apache.cordova.geolocation" version="0.3.7" />
<gap:plugin name="org.apache.cordova.file" version="1.0.1" />
<gap:plugin name="org.apache.cordova.media" version="0.2.8" />
<gap:plugin name="org.apache.cordova.inappbrowser" version="0.2.4" />
<preference name="orientation" value="portrait" />
<preference name="target-device" value="universal" />
<preference name="fullscreen" value="false" />
<preference name="webviewbounce" value="false" />
<preference name="DisallowOverscroll" value="true" />
<access origin="*" />
</widget>

Doing a very quick and brief search, you'll find out that this question has already been asked so so, so, so many times already and there are good answers to it.
However, this should solve your problem:
In your info.plist file, add a new key of Required background modes. That key will have an array of options. In Item 0 of that array set the value to App plays audio.
Then, modify the ~/PhoneGapLib/Classes/Sound.m file (you can use Finder to search for Sound.m). Look for the line that contains if ([resourceURL isFileURL]) {. Just below that line, inside the if statement, add the following:
[[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryPlayback error:nil];
So, that section of code will look like the following:
if ([resourceURL isFileURL]) {
[[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryPlayback error:nil];
audioFile.player = [[ AVAudioPlayer alloc ] initWithContentsOfURL:resourceURL error:&error];
} else {
NSData* data = [NSData dataWithContentsOfURL:resourceURL];
audioFile.player = [[ AVAudioPlayer alloc ] initWithData:data error:&error];
}

This plugin seems to solve the issue.

Related

Unable to load audio files via XMLHttpRequest using WKWebView

I enjoy making old school arcade games using HTML5 Canvas and JS. I've been doing it for years and am probably a bit set in my ways. The games work great in Chrome / Safari on all modern devices.
I figured I should try wrapping a game up using PhoneGap to see how it might perform as an app on the iOS AppStore.
The game was pretty choppy although the audio played great.
I read about the performance boost of WKWebView over the default UIWebView so added that to my config.xml.
The game played beautifully and was just how I'd wanted it to play all along.
But the audio failed to play.
Digging around the internet I see the issue is likely to be how I load the audio files. Here's the basic code I use to load the audio files - an object is passed into the function containing specifics for the audio file.
My projects are laid out in this way:
--- www
|___ gfx (contains png files)
|___ sfx (contains mp3 files)
|___ script (contains js files)
|___ index.html
|___ config.xml
|___ style.css
Very basic!
function loadSound(o) {
try
{
var request = new XMLHttpRequest();
var url = "sfx/" + o.soundname + "." + AUDIOFORMAT;
request.open('GET', url, true);
request.responseType = 'arraybuffer';
// Decode asynchronously
request.onload = function ()
{
try
{
g.audioContext.decodeAudioData(request.response,
function(buffer)
{
o.buffer = buffer;
o.volume 0.6;
},
function()
{
write("Decode error: " + url + ", " + arguments[0]);
}
);
}
catch (e)
{
write("loadSound(onLoad): " + e.message);
}
}
request.send();
}
catch (e)
{
write("LoadSound: " + e.message);
}};
So if my understanding is correct WKWebView fails to read the file because it is not being served via a local http server.
I'd love to know how to get this working.
Is there something I can add to my config.xml (PhoneGap) to include a local http server within the package?
Would I then change the url to url = 'http://localhost/sfx/...'
Is there a specific port required, e.g. http://localhost:10000/sfx/
I don't use any frameworks it's just old fashioned hand-rolled JavaScript.
Here's the relevant section of my config.xml:
<feature name="CDVWKWebViewEngine">
<param name="ios-package" value="CDVWKWebViewEngine" />
</feature>
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
<name></name>
<description></description>
<content src="index.html" />
<gap:config-file platform="ios" parent="UISupportedInterfaceOrientations" overwrite="true">
<array>
<string>UIInterfaceOrientationLandscapeOmg</string>
</array>
</gap:config-file>
<gap:config-file platform="ios" parent="NSPhotoLibraryUsageDescription" overwrite="true">
<string>Does not use photo library</string>
</gap:config-file>
<preference name="DisallowOverscroll" value="true" />
<preference name="android-minSdkVersion" value="14" />
<preference name="orienation" value="portrait" />
<preference name="fullscreen" value="true" />
<preference name="exit-on-suspend" value="true" />
<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" />
<plugin name="cordova-plugin-wkwebview-engine" source="npm" version="1.1.2" />
Ok, so after much digging and a valuable heads up from Kerri, I finally figured out how to implement the changes that I required.
I added the following info to my config.xml:
<plugin name="cordova-plugin-wkwebview-engine-localhost" spec="https://github.com/apache/cordova-plugins.git#wkwebview-engine-localhost" />
also in config.xml I changed
<content src="index.html" />
to
<content src="http://localhost" />
Works a treat.

multitask iOS (Slide Over, Split View) on Cordova App (IntelXDK )

I have created an app in IntelXDK using cordova CLI version 6.2.0
I would like to activate the multitask for iPad, and it is impossible for me now.
I have search for plugins but none is working. I am using the cordova-plugin-splashscreen, and I have tried to configure the Launch storyboard images (because I think is the reason that It is not working the multitask).
I have configure the config.additions.xml right that:
<platform name="ios">
<resource-file src="package-assets/ios/res/Launch Screen.storyboard" target="Launch Screen.storyboard" />
<splash src="package-assets/ios/res/Default#2x~universal~anyany.png" />
<splash src="package-assets/ios/res/Default#2x~universal~comany.png" />
<splash src="package-assets/ios/res/Default#2x~universal~comcom.png" />
<splash src="package-assets/ios/res/Default#3x~universal~anyany.png" />
<splash src="package-assets/ios/res/Default#3x~universal~anycom.png" />
<splash src="package-assets/ios/res/Default#3x~universal~comany.png" />
<!-- below requires the splash screen plugin -->
<!-- docs: https://github.com/apache/cordova-plugin-splashscreen -->
<preference name="SplashScreenDelay" value="3000" />
<preference name="AutoHideSplashScreen" value="true" />
<preference name="FadeSplashScreen" value="false"/>
<preference name="FadeSplashScreenDuration" value="750"/>
<preference name="ShowSplashScreenSpinner" value="false"/>
<!-- below requires the status bar plugin -->
<!-- docs: https://github.com/apache/cordova-plugin-statusbar -->
<!-- see http://devgirl.org/2014/07/31/phonegap-developers-guid -->
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#000000" />
<preference name="StatusBarStyle" value="lightcontent" />
As you can see, I have tried to create the spash for storyboard and the screen.storyboard
It is working now, like if I had never change anything.
I am really lost, and I need some help.
Thanks in advance.

PhoneGap missing plist.key

When I try and load upload my iTunes app installer to iTunes I relieve this error:
Missing Info.plist key - This app attempts to access privacy-sensitive
data without a usage description. The app's Info.plist must contain an
NSPhotoLibraryUsageDescription key with a string value explaining to
the user how the app uses this data.
Missing Info.plist key - This app attempts to access privacy-sensitive
data without a usage description. The app's Info.plist must contain an
NSCameraUsageDescription key with a string value explaining to the
user how the app uses this data.
What can I add to my config file below to let this work:
<preference name="permissions" value="none" />
<preference name="orientation" value="default" />
<preference name="target-device" value="universal" />
<preference name="fullscreen" value="false" />
<preference name="webviewbounce" value="false" />
<preference name="disallowOverscroll" value="true" />
<preference name="prerendered-icon" value="true" />
<preference name="stay-in-webview" value="false" />
<preference name="ios-statusbarstyle" value="black-opaque" />
<preference name="detect-data-types" value="true" />
<preference name="exit-on-suspend" value="false" />
<preference name="show-splash-screen-spinner" value="true" />
<preference name="auto-hide-splash-screen" value="true" />
<preference name="disable-cursor" value="false" />
<preference name="android-minSdkVersion" value="10" />
<preference name="android-targetSdkVersion" value="19" />
<preference name="android-installLocation" value="auto" />
<gap:plugin name="org.apache.cordova.battery-status" source="npm" />
<gap:plugin name="org.apache.cordova.camera" source="npm"/>
<gap:plugin name="org.apache.cordova.media-capture" source="npm"/>
<gap:plugin name="org.apache.cordova.console" source="npm" />
<gap:plugin name="org.apache.cordova.contacts" source="npm"/>
<gap:plugin name="org.apache.cordova.device-motion" source="npm"/>
<gap:plugin name="org.apache.cordova.device-orientation" source="npm"/>
<gap:plugin name="org.apache.cordova.dialogs" source="npm"/>
<gap:plugin name="org.apache.cordova.file" source="npm"/>
<gap:plugin name="org.apache.cordova.file-transfer" source="npm"/>
<gap:plugin name="org.apache.cordova.inappbrowser" source="npm"/>
<gap:plugin name="org.apache.cordova.media" source="npm"/>
<gap:plugin name="org.apache.cordova.network-information" source="npm"/>
<gap:plugin name="org.apache.cordova.splashscreen" source="npm"/>
<gap:plugin name="org.apache.cordova.vibration" source="npm"/>
<icon src="icon.png" />
<gap:splash src="splash.png" gap:platform="android" gap:qualifier="port-ldpi" />
<gap:splash src="splash.png" gap:platform="android" gap:qualifier="port-mdpi" />
<gap:splash src="splash.png" gap:platform="android" gap:qualifier="port-hdpi" />
<gap:splash src="splash.png" gap:platform="android" gap:qualifier="port-xhdpi" />
<gap:splash src="splash.png" gap:platform="blackberry" />
<gap:splash src="splash.png" gap:platform="ios" width="320" height="480" />
<gap:splash src="splash.png" gap:platform="ios" width="640" height="960" />
<gap:splash src="splash.png" gap:platform="ios" width="640" height="1136" />
<gap:splash src="splash.png" gap:platform="ios" width="768" height="1024" />
<gap:splash src="splash.png" gap:platform="ios" width="1024" height="768" />
<gap:splash src="splash.png" gap:platform="winphone" />
<access origin="*" />
<gap:plugin name=" phonegap-plugin-barcodescanner" source="npm" />
<gap:plugin name="uk.co.workingedge.phonegap.plugin.launchnavigator" source="npm" />
<gap:plugin name="cordova-plugin-directions" source="npm" />
<!-- iPhone / iPod Touch - lower 4s -->
<icon src="icon-57.png" gap:platform="ios" width="57" height="57" />
<icon src="icon.png" gap:platform="ios" width="114" height="114" />
<icon src="icon-72.png" gap:platform="ios" width="72" height="72" />
<icon src="152.png" gap:platform="ios" width="152" height="152" />
<icon src="icon-120.png" gap:platform="ios" width="120" height="120" />
<icon src="76.png" gap:platform="ios" width="76" height="76" />
<icon src="icon-40.png" gap:platform="ios" width="40" height="40" />
<!-- iPhone / iPod Touch - 5-5s -->
<icon src="icon.png" gap:platform="ios" width="60" height="60" />
<icon src="icon.png" gap:platform="ios" width="120" height="120" />
<!-- iPhone6-6+ -->
<icon src="icon.png" gap:platform="ios" width="180" height="180" />
<!-- Settings Icon -->
<icon src="icon-29.png" gap:platform="ios" width="29" height="29" />
<icon src="icon.png" gap:platform="ios" width="58" height="58" />
<!-- Spotlight Icon -->
<icon src="icon.png" gap:platform="ios" width="40" height="40" />
<icon src="icon.png" gap:platform="ios" width="80" height="80" />
<plugin name="cordova-plugin-whitelist" version="1" source="npm"/>
<gap:plugin name="cordova-plugin-geolocation" source="npm"/>
<feature name="http://api.phonegap.com/1.0/battery" />
<feature name="http://api.phonegap.com/1.0/camera" />
<feature name="http://api.phonegap.com/1.0/network" />
<feature name="http://api.phonegap.com/1.0/notification" />
<gap:plugin name="cordova-plugin-x-socialsharing" source="npm" />
Another edit:
Most plugins removed the variables for usage description, so now the way of setting them is using edit-config tag in the config.xml like this.
<edit-config target="NSCameraUsageDescription" file="*-Info.plist" mode="overwrite">
<string>We are using the Camera for something...</string>
</edit-config>
But not all plugins have been updated yet, so better read the plugin's README.md before. On the core plugins it's in a section called iOS Quirks.
It also needs the cli 7.0.1 or newer, set it in the config.xml like this:
<preference name="phonegap-version" value="cli-8.0.0" />
EDIT:
My old answer no longer works if you have <preference name='phonegap-version' value='cli-7.0.1' /> (or if you don't have any phonegap-version as it will use it as default)
To set the usage descriptions use the params on the plugin
<plugin name="cordova-plugin-camera">
<param name="CAMERA_USAGE_DESCRIPTION" value="We are using the Camera for something..." />
<param name="PHOTOLIBRARY_USAGE_DESCRIPTION" value="We are using the Photo Library for something..." />
</plugin>
Beware that if you have some plugins with the same usage descriptions and you don't fill them with param tags they might be replaced with the default empty string
You can force to use the old builder with this tag, but it's not recommended, the new builder is better
<preference name='pgb-builder-version' value='1' />
OLD ANSWER:
You can write in the info.plist like this:
<gap:config-file platform="ios" parent="NSCameraUsageDescription" overwrite="true">
<string>We are using the Camera for something...</string>
</gap:config-file>
The overwrite="true" is important because latest version of the camera plugin is already writing empty values.
I have tested it on a sample app and it's working
https://github.com/jcesarmobile/phonegap-template-hello-world/blob/454e852955e66470890cba636450abd422f50598/config.xml#L153-L155
Please open your project in xcode and go to your .plist file in resources folder,
Then at end of in you .plist file click on "+" and add search for "Privacy - Photo Library Usage Description" and add it's value in beside column.
same please do for "NSCameraUsageDescription" again click on "+" and search for "Privacy - Camera Usage Description" and again give some usage description in beside column.
it will solve you issue.
For more info please visit following:
1) Stackoverflow question related to your question
2) Official apple doc for all required keys to be added
Before you access privacy-sensitive data like Camera, Contacts, and so on, you must ask for the authorization, your app will crash when you access them.Then Xcode will log like:
This app has crashed because it attempted to access privacy-sensitive data without a usage description. The app's Info.plist must contain an NSContactsUsageDescription key with a string value explaining to the user how the app uses this data.
How to deal with this? As apple say:
You must statically declare your app’s intended use of protected data classes by including the appropriate purpose string keys in your Info.plist file.
In your case you may have to add the following in your info.plist,
<!-- 🖼 Photo Library -->
<key>NSPhotoLibraryUsageDescription</key>
<string>$(PRODUCT_NAME) photo use</string>
Also suggest you to look at this link for more detailed info on this. Hope it helps.
You can also check out this plugin which helps in manipulating *-info.plist
In ios you need to install camera-plugin with barcodescanner-plugin after you have to put below line in config.xml for overwriting plist file.
<gap:plugin name="phonegap-plugin-barcodescanner" source="npm" />
<preference name="android-build-tool" value="gradle" />
<config-file platform="ios" target="*-Info.plist" parent="NSCameraUsageDescription">
<string>It is used for scaning QR code.</string>
</config-file>
<edit-config platform="ios" target="*-Info.plist" parent="NSCameraUsageDescription" mode="merge">
<string>It is used for scaning QR code.</string>
</edit-config>
<config-file platform="ios" target="*-Info.plist" parent="NSPhotoLibraryUsageDescription">
<string>It is used for scanning QR code</string>
</config-file>
<edit-config platform="ios" target="*-Info.plist" parent="NSPhotoLibraryUsageDescription" mode="merge">
<string>It is used for scanning QR code</string>
</edit-config>
None of the answers here worked for me exactly so I figure I should add my two cents as to how I got this working.
First, I tried the accepted answer (the one written by jcesarmobile). When i tried this and ran: phonegap build ios everytime the configuration was deleted from my config.xml file. So next I tried the solution indicated here:
http://geeklearning.io/how-to-add-specific-configuration-parameters-to-ios-p-list-and-android-manifest/
This did not work at first, There were a number of changes that had to be made, all of which I got from the github repo comments on the file. I suggest you run the build, copy the error message and search in the comments and do what they say. Once I got it to build again, It still did not work upon uploading the itunes connect.
In the end I had to open up the Info.plist file and manually put in the following
<key>NSCameraUsageDescription</key>
<string>We are using the Camera to (blah blah blah, your explanation)</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>We are using the Photo Library to (your reason)</string>
<key>NSMainNibFile</key>
Even though the hook did not do exactly as it claimed I still think it was important because before I did this everything was getting deleted, and now it stays put.
I hope this helps someone out.
Phonegap Build - for anyone using cli-7.0.1 as probably everyone should be now:
<edit-config target="NSPhotoLibraryUsageDescription" file="*-Info.plist" mode="overwrite">
<string>Used to allow the user to select media to upload to us</string>
</edit-config>
That does NOT go within the tag, simply within the Widget tag like everything else. Change the string to whatever it suitable for you.

How do I prevent PhoneGap Build from asking for location permissions? (iPhone)

I have implemented every documentation and fix that I can find to no avail.
I want the app to grab the location when a button is tapped.
Every fix I try has one of two outcomes:
 1) A jumbled mess of a permission request appears every time.
 2) The latitude and longitude are reported as '0'.
No matter where I call the getCurrentPosition() I am presented a jumbled mess of a permission request (even though on first-load the app requests it).
I am able to limit the permission request to once per session, but it is still an ugly mess and I can't believe that there wouldn't be a way to avoid it.
config.xml -- UPDATED using ConfiGAP
<preference name="phonegap-version" value="3.3.0" />
<preference name="orientation" value="portrait" />
<preference name="fullscreen" value="false" />
<preference name="target-device" value="universal" />
<preference name="webviewbounce" value="false" />
<preference name="prerendered-icon" value="true" />
<preference name="stay-in-webview" value="true" />
<preference name="ios-statusbarstyle" value="black-transparent" />
<preference name="detect-data-types" value="false" />
<preference name="exit-on-suspend" value="false" />
<preference name="show-splash-screen-spinner" value="false" />
<preference name="auto-hide-splash-screen" value="true" />
<preference name="EnableViewportScale" value="true" />
<preference name="MediaPlaybackRequiresUserAction" value="false" />
<preference name="AllowInlineMediaPlayback" value="false" />
<preference name="BackupWebStorage" value="none" />
<preference name="TopActivityIndicator" value="gray" />
<preference name="KeyboardDisplayRequiresUserAction" value="false" />
<preference name="HideKeyboardFormAccessoryBar" value="false" />
<preference name="SuppressesIncrementalRendering" value="false" />
<preference name="android-minSdkVersion" value="7" />
<preference name="android-installLocation" value="internalOnly" />
<preference name="SplashScreenDelay" value="5000" />
<preference name="ErrorUrl" value=""/>
<preference name="BackgroundColor" value="0x000000"/>
<preference name="KeepRunning" value="true"/>
<preference name="DisallowOverscroll" value="true"/>
<preference name="LoadingDialog" value=","/>
<preference name="LoadUrlTimeoutValue" value="20000" />
<preference name="disable-cursor" value="false" />
<gap:platform name="ios" />
<gap:platform name="android" />
<gap:platform name="winphone" />
<feature name="http://api.phonegap.com/1.0/geolocation"/>
<gap:plugin name="org.apache.cordova.geolocation" />
<gap:plugin name="org.apache.cordova.splashscreen" />
<gap:plugin name="com.phonegap.plugin.statusbar" />
<gap:config-file platform="ios" parent="UIStatusBarHidden">
<true/>
</gap:config-file>
<gap:config-file platform="ios" parent="UIViewControllerBasedStatusBarAppearance">
<false/>
</gap:config-file>
app.js
$("#punches").on('pagebeforeshow', function () {
navigator.geolocation.getCurrentPosition (function (pos) {
var lat = pos.coords.latitude,
lon = pos.coords.longitude;
$("#latitude").val(lat);
$("#longitude").val(lon);
});
});
Tired of banging my head against a wall for something that I feel should be so much easier than I am making of it.
ANY help is greatly appreciated.
Shouldn't it be
var lat = pos.coords.latitude;
var lon = pos.coords.longitude;
?
I'd also make sure I specified the version of the core geolocation plugin just so you know it works with your versions of PGB.
This is extremely embarrassing...but it appears that all I was missing was:
<script src="phonegap.js"></script>
I put this in my index.html and the double-permission is now gone and Latitude/Longitude are being reported appropriately.
I apologize for the question. Thanks to those whom helped.

iOS7 and PhoneGap build - app height and touch response

I've just built an app using PhoneGap build, running on iOS7. The build went fine, and the install was fine, but there are some problems that I can't figure out.
Firstly, the app height isn't full size - looks to be c. iOS 6 size. If I use the PhoneGap Build debug tool to call alert(window.innerHeight);, the response I get back is 480.
Secondly, the app isn't responding to any touch events. Again, if I use the debug tool, I can pass click events to the app and it responds as expected, so I know the app is responsive, but if I try to perform the same event on the device, nothing happens.
I'm sure these are probably common issues, but I can't seem to figure them out! The same app works perfectly on Andoird, which makes me suspect it's a configuration issue. For reference, my config.xml looks like:
<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.xxxxxx.walkingguide"
versionCode="100"
version = "1.0.0">
<!-- versionCode is optional and Android only -->
<name>XXXXXXXXXXXX Walking Guide</name>
<description>
Find your way around our campuses, and find out more about our buildings.
</description>
<author href="http://www.axxxxxxxsign.co.uk" email="hello#xxxxxxxxx.co.uk">
XXXXX XXXXXX
</author>
<preference name="phonegap-version" value="3.3.0" />
<preference name="orientation" value="portrait" />
<preference name="fullscreen" value="true" />
<preference name="webviewbounce" value="false" />
<preference name="detect-data-types" value="false" />
<preference name="show-splash-screen-spinner" value="false" />
<preference name="android-installLocation" value="auto" />
<preference name="auto-hide-splash-screen" value="false" />
<preference name="splash-screen-duration" value="10000" />
<icon src="icon.png" />
<!-- iPhone and iPod touch -->
<gap:splash src="images/splash-ios" gap:platform="ios" width="320" height="480" />
<gap:splash src="images/splash-ios#2x.png" gap:platform="ios" width="640" height="960" />
<!-- iPhone 5 / iPod Touch (5th Generation) -->
<gap:splash src="images/splash-568h#2x.pnh" gap:platform="ios" width="640" height="1136" />
<gap:splash src="images/android-splash.9.png" gap:platform="android" />
<gap:plugin name="org.apache.cordova.geolocation" version="0.3.6" />
<gap:plugin name="org.apache.cordova.network-information" version="0.2.7" />
<gap:plugin name="org.apache.cordova.dialogs" />
<gap:plugin name="org.apache.cordova.media-capture" version="0.2.8" />
<gap:plugin name="org.apache.cordova.splashscreen" version="0.2.7" />
<access origin="*" />
</widget>
Having looked into this further, the problem is related to how iOS 7 treats the status bar.
By default, the status bar sits over the top of the WebView, and apparently means the app can't be interacted with (not sure if this happens on all apps, but I tried it with both my app and a simple demo app and had the same problems).
There is a PhoneGap Plugin (also available on PhoneGap Build) that allows you to hide the status bar - https://github.com/phonegap-build/StatusBarPlugin
Following that and setting up the configs
<gap:config-file platform="ios" parent="UIStatusBarHidden">
<true/>
</gap:config-file>
<gap:config-file platform="ios" parent="UIViewControllerBasedStatusBarAppearance">
<false/>
</gap:config-file>
The status bar is hidden, and everything appears to work as it should.
Try adding the below to your app. It will set the height and width to the ones supported by the device.
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1,
minimum-scale=1, width=device-width, height=device-height,
target-densitydpi=device-dpi" />

Resources