Unable to load audio files via XMLHttpRequest using WKWebView - ios

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.

Related

IOS error : Terminating app due to uncaught exception 'NSUnknownKeyException' in ionic3?

On iOS 9.0 my app is terminated just after launch, with this message in xcode
*** Terminating app due to uncaught exception 'NSUnknownKeyException', reason: '[ setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key view.'
I tried each and everything for solve above error but nothing worked for.i am using background mode plugin for for get location in background mode.i tried below soltion's:
Tried Solution
1st solution:
https://github.com/katzer/cordova-plugin-background-mode/issues/419
Removing lines APPBackgroundMode.m:266 & 267: [obj setValue:[NSNumber
numberWithBool:YES] <--- remove! forKey:[APPBackgroundMode
wkProperty]]; <--- remove!
2nd solution:
Try in file src\ios\APPBackgroundMode.m replace following lines
+ (NSString*) wkProperty {
NSString* str = #"YWx3YXlzUnVuc0F0Rm9yZWdyb3VuZFByaW9yaXR5";
NSData* data = [[NSData alloc] initWithBase64EncodedString:str options:0];
return [[NSString alloc] initWithData:data encoding:NSUTF8StringEncoding]; }
Below we have mentioned the config.xml file
<edit-config file="*-Info.plist" mode="merge" target="NSLocationWhenInUseUsageDescription">
<string>This App wants to track your location</string>
</edit-config>
<plugin name="cordova-sqlite-storage" spec="^2.6.0" />
<plugin name="cordova-plugin-splashscreen" spec="^4.0.3" />
<plugin name="cordova-plugin-whitelist" spec="^1.3.1" />
<plugin name="cordova-plugin-advanced-http" spec="^2.0.2" />
<plugin name="cordova-plugin-statusbar" spec="2.4.2" />
<plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" />
<plugin name="cordova-plugin-filepath" spec="~1.5.1" />
<plugin name="cordova-plugin-actionsheet" spec="~2.3.3" />
<plugin name="cordova-plugin-document-viewer" spec="~0.9.10" />
<plugin name="cordova-plugin-inappbrowser" spec="~3.0.0" />
<plugin name="cordova-plugin-camera" spec="~4.0.3" />
<plugin name="cordova-plugin-file" spec="~6.0.1" />
<plugin name="cordova-plugin-datepicker" spec="~0.9.3" />
<plugin name="cordova-plugin-file-transfer" spec="~1.7.1" />
<plugin name="cordova-plugin-network-information" spec="~2.0.1" />
<plugin name="cordova-plugin-telerik-imagepicker" spec="~2.2.2">
<variable name="PHOTO_LIBRARY_USAGE_DESCRIPTION" value="your usage message" />
</plugin>
<plugin name="cordova-plugin-uniquedeviceid" spec="^1.3.2" />
<plugin name="cordova.plugins.diagnostic" spec="4.0.11" />
<plugin name="org.apache.cordova.geolocation" spec="^0.3.6" />
<plugin name="cordova-plugin-android-permissions" spec="^1.0.0" />
<plugin name="cordova-plugin-request-location-accuracy" spec="2.3.0">
<variable name="PLAY_SERVICES_LOCATION_VERSION" value="16.+" />
</plugin>
<plugin name="cordova-plugin-nativegeocoder" spec="3.2.2" />
<plugin name="cordova-plugin-fcm-with-dependecy-updated" spec="2.4.0" />
<plugin name="cordova-plugin-background-mode" spec="0.7.2" />
<plugin name="cordova-plugin-mauron85-background-geolocation" spec="2.3.6">
<variable name="GOOGLE_PLAY_SERVICES_VERSION" value="11+" />
<variable name="ANDROID_SUPPORT_LIBRARY_VERSION" value="23+" />
<variable name="ICON" value="#mipmap/icon" />
<variable name="SMALL_ICON" value="#mipmap/icon" />
<variable name="ACCOUNT_NAME" value="#string/app_name" />
<variable name="ACCOUNT_LABEL" value="#string/app_name" />
<variable name="ACCOUNT_TYPE" value="$PACKAGE_NAME.account" />
<variable name="CONTENT_AUTHORITY" value="$PACKAGE_NAME" />
<variable name="ALWAYS_USAGE_DESCRIPTION" value="This app always requires location tracking" />
</plugin>
<plugin name="cordova-plugin-local-notification" spec="0.9.0-beta.2" />
<plugin name="cordova-plugin-ionic-webview" spec="4.1.1">
<variable name="ANDROID_SUPPORT_ANNOTATIONS_VERSION" value="27.+" />
</plugin>
i tried all solution but nothing worked for me please team help me how to fix?
finally i fixed above issue after disabled WKWebView and use UIWebView in config.xml (tested only in ionic 3 not ionic4)
<preference name="CordovaWebViewEngine" value="CDVUIWebViewEngine" >

What is the Parent Tag for <edit-config in config,xml in cordova ios project?

I update an iOS app and it was rejected with below email
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.
I try to add below xml tag to config.xml.
<edit-config file="*-Info.plist" mode="merge" target="NSCameraUsageDescription">
<string>Need camera access to take pictures</string>
</edit-config>
<edit-config file="*-Info.plist" mode="merge" target="NSPhotoLibraryUsageDescription">
<string>Need to photo library access to get pictures from there</string>
</edit-config>
But I am not sure under which tag I need to
My config.xml file.
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.aotsinc.christian.iphone.biblequizcompanion" version="3.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>Bible Quiz Companion</name>
<description>
Bible Quiz Companion is a free app useful for the users to prepare for Jounior Bible Quiz Compatition.
</description>
<author email="dev#cordova.apache.org" href="http://cordova.io">
Alpha Omega Tech Solutions Inc.
</author>
<content src="index.html" />
<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.5.4" />
<plugin name="cordova-plugin-whitelist" spec="^1.3.3" />
<plugin name="cordova-plugin-x-socialsharing" spec="^5.2.1" />
<plugin name="cordova-plugin-camera" spec="^4.0.1" />
<plugin name="cordova-plugin-tts" spec="^0.2.3" />
<plugin name="cordova-plugin-apprate" spec="^1.3.0" />
<plugin name="com.darktalker.cordova.screenshot" spec="git+https://github.com/gitawego/cordova-screenshot.git" />
</widget>
Thanks for your help
EDIT 1
I try to add the code that you gave in plugin.xml inside camera plugin as below. But I didn't see this entry in the info.plist. Can you please tell me whether my change in the plugin.xml is correct. Thanks
<platform name="ios">
<config-file target="config.xml" parent="/*">
<feature name="Camera">
<param name="ios-package" value="CDVCamera" />
</feature>
<preference name="CameraUsesGeolocation" value="false" />
</config-file>
<js-module src="www/ios/CameraPopoverHandle.js" name="CameraPopoverHandle">
<clobbers target="CameraPopoverHandle" />
</js-module>
<preference name="CAMERA_USAGE_DESCRIPTION" default=" " />
<config-file target="*-Info.plist" parent="NSCameraUsageDescription">
<string>Need camera access to take pictures</string>
</config-file>
<preference name="PHOTOLIBRARY_USAGE_DESCRIPTION" default=" " />
<config-file target="*-Info.plist" parent="NSPhotoLibraryUsageDescription">
<string>Need to photo library access to get pictures from there</string>
</config-file>
<header-file src="src/ios/UIImage+CropScaleOrientation.h" />
<source-file src="src/ios/UIImage+CropScaleOrientation.m" />
<header-file src="src/ios/CDVCamera.h" />
<source-file src="src/ios/CDVCamera.m" />
<header-file src="src/ios/CDVJpegHeaderWriter.h" />
<source-file src="src/ios/CDVJpegHeaderWriter.m" />
<header-file src="src/ios/CDVExif.h" />
<framework src="ImageIO.framework" weak="true" />
<framework src="CoreLocation.framework" />
<framework src="CoreGraphics.framework" />
<framework src="AssetsLibrary.framework" />
<framework src="MobileCoreServices.framework" />
<framework src="CoreGraphics.framework" />
<framework src="AVFoundation.framework" />
</platform>
see docs
In your config.xml as a child node of <platform name="ios"> add:
<edit-config target="NSPhotoLibraryUsageDescription" file="*-Info.plist" mode="merge">
<string>need to photo library access to get pictures from there</string>
</edit-config>
Use config-file instead of edit-config below PLATFORM tag in PLUGIN.XML file of your plugin that need this:
<platform name="ios">
<preference name="CAMERA_USAGE_DESCRIPTION" default=" " />
<config-file target="*-Info.plist" parent="NSCameraUsageDescription">
<string>Need camera access to take pictures</string>
</config-file>
<preference name="PHOTOLIBRARY_USAGE_DESCRIPTION" default=" " />
<config-file target="*-Info.plist" parent="NSPhotoLibraryUsageDescription">
<string>Need to photo library access to get pictures from there</string>
</config-file>
</platform>

Cordova/Phonegap IOS keyboard scroll issue, White background shown

I am currently developing using Phonegap Build. On IOS, when the keyboard shows and the view is scrolled to show what the keyboard is currently in front the view appears corrupted. It is fixed when the user loses and the keyboard closes.
The issue is consistent over all pages of the application, I have spent considerable time research but I cannot find any answers for this specific issue, any and all help is greatly appreciated.
Config shown below.
The images below try to demonstrate the issue the best I can.
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" id="current.id" version="1.0.2">
<name>Foobar</name>
<description>an application</description>
<content src="index.html"/>
<preference name="DisallowOverscroll" value="true"/>
<preference name="android-minSdkVersion" value="14"/>
<preference name="Fullscreen" value="flase" />
<preference name="StatusBarOverlaysWebView" value="true" />
<preference name="prerendered-icon" value="true" />
<preference name="permissions" value="none" />
<preference name="orientation" value="portrait" />
<gap:config-file platform="ios" parent="NSCameraUsageDescription" overwrite="true">
<string>We are using the Camera for the profile picture..</string>
</gap:config-file>
<gap:config-file platform="ios" parent="NSPhotoLibraryUsageDescription" overwrite="true">
<string>We are using the Camera for the profile picture..</string>
</gap:config-file>
<feature></feature>
<plugin name="cordova-custom-config" source="npm" spec="~4.0.2" />
<plugin name="cordova-plugin-battery-status" source="npm" spec="~1.1.1"/>
<plugin name="cordova-plugin-console" source="npm" spec="~1.0.2"/>
<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-globalization" source="npm" spec="~1.0.3"/>
<plugin name="cordova-plugin-inappbrowser" source="npm" spec="~1.3.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-camera" source="npm" spec="~2.1.1"/>
<plugin name="cordova-plugin-media-capture" source="npm" spec="~1.2.0"/>
<plugin name="cordova-plugin-media" source="npm" spec="~2.2.0"/>
Step 1: Image 1, Focus on the input.
Step 2: Image 2, Scrolling slightly down while still focused on the input.
Continuing to scroll will cause the entire view to show white, except for a submit button at the very bottom.
I can then tap on the background / lose focus and the background and inputs will load back in.
Thanks for any assistance!
I think it's a css issue not a cordova config. iOS handles the web view scrolling by default whenever keyboard shows up.So if you have any additional css to handle page scroll on keyboard display please remove it.

custom splash screens not updating in phonegap build ios

here is my Config.xml and also I have added splash screens in www/res/screen/ios as well as in /platforms/ios/project-name/Resources/splash
and the names of images are default but I have replaced the images and yes icons are changed but not able to change splash screen. it always displays default phonegap splash screen and then white screen and then my original application homepage.
another issue is that the icon is changing at one place only if I'll go to settings and search my app of zegr it gives default icon of phonegap.
<?xml version="1.0" encoding="UTF-8"?>
<!-- config.xml reference: https://build.phonegap.com/docs/config-xml -->
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.phonegap.helloworld"
version = "1.0.0">
<name>Zegr</name>
<description>
Business Made Simple
</description>
<author href="http://phonegap.com" email="support#phonegap.com">
PhoneGap Team
</author>
<!--
If you do not want any permissions to be added to your app, add the
following tag to your config.xml; you will still have the INTERNET
permission on your app, which PhoneGap requires.
-->
<preference name="permissions" value="none"/>
<!-- Customize your app and platform with the preference element. -->
<preference name="orientation" value="default" /> <!-- all: default means both landscape and portrait are enabled -->
<preference name="target-device" value="universal" /> <!-- all: possible values handset, tablet, or universal -->
<preference name="fullscreen" value="true" /> <!-- all: hides the status bar at the top of the screen -->
<preference name="webviewbounce" value="true" /> <!-- ios: control whether the screen 'bounces' when scrolled beyond the top -->
<preference name="prerendered-icon" value="true" /> <!-- ios: if icon is prerendered, iOS will not apply it's gloss to the app's icon on the user's home screen -->
<preference name="stay-in-webview" value="false" /> <!-- ios: external links should open in the default browser, 'true' would use the webview the app lives in -->
<preference name="ios-statusbarstyle" value="black-opaque" /> <!-- ios: black-translucent will appear black because the PhoneGap webview doesn't go beneath the status bar -->
<preference name="detect-data-types" value="true" /> <!-- ios: controls whether data types (such as phone no. and dates) are automatically turned into links by the system -->
<preference name="exit-on-suspend" value="false" /> <!-- ios: if set to true, app will terminate when home button is pressed -->
<preference name="SplashScreen" value="CDVSplashScreen" />
<preference name="show-splash-screen-spinner" value="false" /> <!-- ios: if set to false, the spinner won't appear on the splash screen during app loading -->
<preference name="auto-hide-splash-screen" value="true" /> <!-- ios: if set to false, the splash screen must be hidden using a JavaScript API -->
<preference name="disable-cursor" value="false" /> <!-- blackberry: prevents a mouse-icon/cursor from being displayed on the app -->
<preference name="android-installLocation" value="auto" /> <!-- android: app install location. 'auto' will choose. 'internalOnly' is device memory. 'preferExternal' is SDCard. -->
<!--
Define a specific version of PhoneGap to build into your app.
<preference name="phonegap-version" value="3.5.0" />
-->
<!-- Plugins -->
<!-- Core plugins -->
<plugin name="cordova-plugin-battery-status" />
<plugin name="cordova-plugin-camera" />
<plugin name="cordova-plugin-media-capture" />
<plugin name="cordova-plugin-console" />
<plugin name="cordova-plugin-contacts" />
<plugin name="cordova-plugin-device" />
<plugin name="cordova-plugin-device-motion" />
<plugin name="cordova-plugin-device-orientation" />
<plugin name="cordova-plugin-dialogs" />
<plugin name="cordova-plugin-file" />
<plugin name="cordova-plugin-file-transfer" />
<plugin name="cordova-plugin-geolocation" />
<plugin name="cordova-plugin-globalization" />
<plugin name="cordova-plugin-inappbrowser" />
<plugin name="cordova-plugin-media" />
<plugin name="cordova-plugin-network-information" />
<plugin name="cordova-plugin-splashscreen" />
<plugin name="cordova-plugin-vibration" />
<!-- Third party plugins -->
<!-- A list of available plugins are available at https://build.phonegap.com/plugins -->
<!--
<plugin name="com.phonegap.plugins.barcodescanner" />
-->
<!-- Define app icon for each platform. -->
<icon src="icon.png" />
<icon src="res/icon/android/icon-36-ldpi.png" gap:platform="android" gap:qualifier="ldpi" />
<icon src="res/icon/android/icon-48-mdpi.png" gap:platform="android" gap:qualifier="mdpi" />
<icon src="res/icon/android/icon-72-hdpi.png" gap:platform="android" gap:qualifier="hdpi" />
<icon src="res/icon/android/icon-96-xhdpi.png" gap:platform="android" gap:qualifier="xhdpi" />
<icon src="res/icon/blackberry/icon-80.png" gap:platform="blackberry" />
<icon src="res/icon/blackberry/icon-80.png" gap:platform="blackberry" gap:state="hover"/>
<icon src="res/icon/ios/icon-57.png" gap:platform="ios" width="57" height="57" />
<icon src="res/icon/ios/icon-72.png" gap:platform="ios" width="72" height="72" />
<icon src="res/icon/ios/icon-57-2x.png" gap:platform="ios" width="114" height="114" />
<icon src="res/icon/ios/icon-72-2x.png" gap:platform="ios" width="144" height="144" />
<icon src="res/icon/webos/icon-64.png" gap:platform="webos" />
<icon src="res/icon/windows-phone/icon-48.png" gap:platform="winphone" />
<icon src="res/icon/windows-phone/icon-173.png" gap:platform="winphone" gap:role="background" />
<!-- Define app splash screen for each platform. -->
<gap:splash src="res/screen/android/screen-ldpi-portrait.png" gap:platform="android" gap:qualifier="port-ldpi" />
<gap:splash src="res/screen/android/screen-mdpi-portrait.png" gap:platform="android" gap:qualifier="port-mdpi" />
<gap:splash src="res/screen/android/screen-hdpi-portrait.png" gap:platform="android" gap:qualifier="port-hdpi" />
<gap:splash src="res/screen/android/screen-xhdpi-portrait.png" gap:platform="android" gap:qualifier="port-xhdpi" />
<gap:splash src="res/screen/blackberry/screen-225.png" gap:platform="blackberry" />
<gap:splash src="res/screen/ios/screen-iphone-portrait.png" gap:platform="ios" width="320" height="480" />
<gap:splash src="res/screen/ios/screen-iphone-portrait-2x.png" gap:platform="ios" width="640" height="960" />
<gap:splash src="res/screen/ios/screen-iphone-portrait-568h-2x.png" gap:platform="ios" width="640" height="1136" />
<gap:splash src="res/screen/ios/screen-ipad-portrait.png" gap:platform="ios" width="768" height="1024" />
<gap:splash src="res/screen/ios/screen-ipad-landscape.png" gap:platform="ios" width="1024" height="768" />
<gap:splash src="res/screen/windows-phone/screen-portrait.jpg" gap:platform="winphone" />
<gap:config-file platform="ios" parent="CFBundleShortVersionString">
<string>100</string>
</gap:config-file>
<feature name="SplashScreen">
<param name="ios-package" value="CDVSplashScreen" />
</feature>
<!--
Define access to external domains.
<access /> - a blank access tag denies access to all external resources.
<access origin="*" /> - a wildcard access tag allows access to all external resource.
Otherwise, you can specify specific domains:
<access origin="http://phonegap.com" /> - allow any secure requests to http://phonegap.com/
<access origin="http://phonegap.com" subdomains="true" /> - same as above, but including subdomains, such as http://build.phonegap.com/
<access origin="http://phonegap.com" browserOnly="true" /> - only allows http://phonegap.com to be opened by the child browser.
-->
<access origin="*"/>
<!-- Added the following intents to support the removal of whitelist code from base cordova to a plugin -->
<!-- Whitelist configuration. Refer to https://cordova.apache.org/docs/en/edge/guide_appdev_whitelist_index.md.html -->
<plugin name="cordova-plugin-whitelist" version="1" />
<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>
</widget>

Phonegap app works in IOS background

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.

Resources