OAuth with facebook/gmail is not working on iOS simulator (Cordova app + Firebase) - ios

I am trying to finish my last thing on cordova (+Firebase) mobile app and stuck with a problem.
So, I was working on social login for cordova app,
I was following this guide - Link to guide
when I've finished, I had some problems, but fixed them (only on android)
on iOS, when u click on some of login button - nothing happens,
BUT, when I hide the app (or just close it) and open it again, it start making redirect.
In that redirect I'm making login with facebook/gmail and then it redirects me to the link that I have in my config.xml
here is my request:
await firebase.auth().signInWithRedirect(provider);
const user = await firebase.auth().getRedirectResult();
, it works okay on android
and here is my config.xml (I've tried a lot of stuckoverflow and github solution there, so it can look messy
<?xml version='0.0.1.2' encoding='utf-8'?>
<widget id="com.appname.ios" version="0.0.1.2" xmlns="http://www.w3.org/ns/widgets">
<name>App name</name>
<description>
Some description...
</description>
<author email="example#gmail.com" href="https://appname.com">
App ame
</author>
<content src="index.html" />
<icon src="/public/favicon.ico" />
<universal-links>
<host name="appname.page.link" scheme="https" />
<host name="appname.com" scheme="https">
<path url="/__/auth/callback"/>
</host>
</universal-links>
<plugin name="cordova-plugin-whitelist" spec="1" />
<plugin name="cordova.plugins.diagnostic" />
<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:*" />
<allow-navigation href="*"/>
<platform name="android">
<allow-intent href="market:*" />
</platform>
<preference name="AndroidLaunchMode" value="singleTask" />
<preference name="orientation" value="portrait" />
<preference name="CordovaWebViewEngine" value="CDVUIWebViewEngine" />
<platform name="ios">
<icon src="public/ios/60.png" width="180" height="180" />
<icon src="public/ios/60.png" width="60" height="60" />
<icon src="public/ios/76.png" width="76" height="76" />
<icon src="public/ios/40.png" width="40" height="40" />
<icon src="public/ios/57.png" width="57" height="57" />
<icon src="public/ios/72.png" width="72" height="72" />
<icon src="public/ios/167.png" width="167" height="167" />
<icon src="public/ios/29.png" width="29" height="29" />
<icon src="public/ios/50.png" width="50" height="50" />
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
<splash src="public/ios/appname.png" width="320" height="480"/>
<splash src="public/ios/appname.png" width="640" height="960"/>
<splash src="public/ios/appname.png" width="768" height="1024"/>
<splash src="public/ios/appname.png" width="1536" height="2048"/>
<splash src="public/ios/appname.png" width="1024" height="768"/>
<splash src="public/ios/appname.png" width="2048" height="1536"/>
<splash src="public/ios/appname.png" width="640" height="1136"/>
<splash src="public/ios/appname.png" width="750" height="1334"/>
<splash src="public/ios/appname.png" width="1242" height="2208"/>
</platform>
</widget>
And here is a screen shot of what I have when I make success login:
ios simulator screenshot

Already fixed by doing next things:
On iOS social button was not even redirecting to appropriate provider because of some error that was stopping whole stack:
found answer here - fixedBugLink
After I've fixed that error, next things I was dealing with was that I could not return back to app after successful login
So I found that the problem was in unappropriate adding the next plugin -
https://www.google.com/search?q=cordova+url+scheme+ios&oq=cordova+url+scheme+ios&aqs=chrome..69i57j0j69i60.2808j0j4&sourceid=chrome&ie=UTF-8
I fixed problem with wrong URL scheme link, by changing the default one to
REVERSED_CLIENT_ID from GoogleService-Info.plist file in my iOS app.
So be careful with following guides (by the way I've followed this one - oauth-cordva-firebase
Hope this will help someone too :)

Related

How to correct Phonegap Buil error when uploading to IOS Connect : ERROR ITMS-90032: "Invalid Image Path - No image found at the path

I have been trying to get an ipa file uploaded to Apple Connect to test it.
It is generated by Phonegap build, for App ID 3729636.
I am using a service to upload, since I don't have a MAC.
The error is the following : ERROR ITMS-90032: "Invalid Image Path - No image found at the path referenced under key 'CFBundleIcons': 'AppIcon20x20'"
The icon files are as follows:
The ios icon and screen configuration file excerpt is :
<platform name="ios">
<!-- iOS 8.0+ -->
<!-- iPhone 6 Plus -->
<icon src="res/icon/ios/icon-60#3x.png" width="180" height="180" />
<!-- iOS 7.0+ -->
<!-- iPhone / iPod Touch -->
<icon src="res/icon/ios/icon-60.png" width="60" height="60" />
<icon src="res/icon/ios/icon-60#2x.png" width="120" height="120" />
<!-- iPad -->
<icon src="res/icon/ios/icon-76.png" width="76" height="76" />
<icon src="res/icon/ios/icon-76#2x.png" width="152" height="152" />
<!-- Spotlight Icon -->
<icon src="res/icon/ios/icon-40.png" width="40" height="40" />
<icon src="res/icon/ios/icon-40#2x.png" width="80" height="80" />
<!-- iOS 6.1 -->
<!-- iPhone / iPod Touch -->
<icon src="res/icon/ios/icon.png" width="57" height="57" />
<icon src="res/icon/ios/icon#2x.png" width="114" height="114" />
<!-- iPad -->
<icon src="res/icon/ios/icon-72.png" width="72" height="72" />
<icon src="res/icon/ios/icon-72#2x.png" width="144" height="144" />
<!-- iPad Pro -->
<icon src="res/icon/ios/icon-167.png" width="167" height="167" />
<!-- iPhone Spotlight and Settings Icon -->
<icon src="res/icon/ios/icon-small.png" width="29" height="29" />
<icon src="res/icon/ios/icon-small#2x.png" width="58" height="58" />
<icon src="res/icon/ios/icon-small#3x.png" width="87" height="87" />
<!-- iPad Spotlight and Settings Icon -->
<icon src="res/icon/ios/icon-50.png" width="50" height="50" />
<icon src="res/icon/ios/icon-50#2x.png" width="100" height="100" />
<!-- iPad Pro -->
<icon src="res/icon/ios/icon-83.5#2x.png" width="167" height="167" />
<!-- Was missing -->
<icon src="res/icon/ios/icon-20.png" width="20" height="20" />
<splash height="1136" platform="ios" src="res/screen/ios/Default-568h#2x~iphone.png" width="640" />
<splash height="1334" platform="ios" src="res/screen/ios/Default-667h.png" width="750" />
<splash height="2208" platform="ios" src="res/screen/ios/Default-736h.png" width="1242" />
<splash height="1242" platform="ios" src="res/screen/ios/Default-Landscape-736h.png" width="2208" />
<splash height="1536" platform="ios" src="res/screen/ios/Default-Landscape#2x~ipad.png" width="2048" />
<splash height="768" platform="ios" src="res/screen/ios/Default-Landscape~ipad.png" width="1024" />
<splash height="2048" platform="ios" src="res/screen/ios/Default-Portrait#2x~ipad.png" width="1536" />
<splash height="1024" platform="ios" src="res/screen/ios/Default-Portrait~ipad.png" width="768" />
<splash height="960" platform="ios" src="res/screen/ios/Default#2x~iphone.png" width="640" />
<splash height="480" platform="ios" src="res/screen/ios/Default~iphone.png" width="320" />
</platform>
I have tried many versions of the CLI, from 6.5.0 to 9.0.0, without much difference (only the 6.5.0 has a different error).
The latest is 9.0.0 : <preference name="phonegap-version" value="cli-9.0.0"/>
To make the build, I package the www directory and upload the resulting zip file.
Please, please HELP!
After much effort debugging with confusing error messages, the problem appeared to be with the image files themselves. They were saved with GIMP and probably GIMP tried to be too clever or insert too much info. It offers a lot of options when exporting and probably one of them wasn't appreciated by Cordova.
I opened and saved all images with Paint and the problem went away.

Remove iPad from device list in PhoneGap app

I have just finished building my second app in PhoneGap and this problem has arisen again, except this time it's preventing the app being approved by the app store so I can't ignore it any further.
I have Googled and googled this and tried many things but I cannot seem to remove the app from being available to iPads. It is a iPhone only app and I don't even have an iPad to test it on so I can't even 'make it good' for ipad to get it through the to App store. I have included my current version of config.xml at the bottom of this post, you'll see I have the standard:
<preference name="target-device" value="handset" />
...and the supposed work around I have found for this problem online (which seems to be pretty widespread, but should also now be fixed apparently?!):
<gap:config-file platform="ios" parent="UIDeviceFamily" mode="replace">
<string>1</string>
</gap:config-file>
...and when I have compiled the ipa in PhoneGap build and open it in my itunes, it even says it's only available for iPhone and iPod touch:
...but when I upload it through Application loader it appears in iTunes Connect as available for iPads and as well in TestFlight. Strangely it does not require iPad friendly screenshots which makes me think I'm part way there, but the review team are insisting I make it iPad worthy before they allow it into the store and it's getting a little time critical.
Here's my full config.xml (I've XXX'd out the sensitive info as it's not a personal app)
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "XXX.XXXXXXX.XXXXXXXX"
version = "14">
<gap:config-file platform="ios" parent="CFBundleShortVersionString">
<string>1.0.0</string>
</gap:config-file>
<name>XXXXXXXX</name>
<description>
XXXXXXXXXX
</description>
<author href="http://XXXXXX.co.uk" email="XXXX#XXXXXXXXX.co.uk">
XXXXXXXXXXX
</author>
<!-- Define the main entry-point to the application -->
<content src="index.html" />
<!-- Customize your app and platform with the preference element. -->
<preference name="orientation" value="portrait" /> <!-- all: default means both landscape and portrait are enabled -->
<preference name="target-device" value="handset" /> <!-- 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="default" /> <!-- ios: black-translucent will appear black because the PhoneGap webview doesn't go beneath the status bar -->
<preference name="detect-data-types" value="false" /> <!-- 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="true" /> <!-- ios: if set to true, app will terminate when home button is pressed -->
<preference name="show-splash-screen-spinner" value="true" /> <!-- 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="deployment-target" value="8.0" />
<preference name="phonegap-version" value="cli-6.5.0" />
<!-- Plugins -->
<!-- Core plugins -->
<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-dialogs" source="npm" spec="~1.2.0" />
<plugin name="cordova-plugin-inappbrowser" source="npm" spec="~1.3.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" />
<gap:config-file platform="ios" parent="ITSAppUsesNonExemptEncryption" mode="add">
<false/>
</gap:config-file>
<gap:config-file platform="ios" parent="UIDeviceFamily" mode="replace">
<string>1</string>
</gap:config-file>
<!-- Define app icon and splashscreen for each platform. -->
<icon src="icon.png" gap:platform="ios" width="57" height="57"/>
<icon src="res/icon/ios/icon-57.png" gap:platform="ios" width="57" height="57"/>
<icon src="res/icon/ios/icon-57#2x.png" gap:platform="ios" width="114" height="114"/>
<icon src="res/icon/ios/icon-72.png" gap:platform="ios" width="72" height="72"/>
<icon src="res/icon/ios/icon-72#2x.png" gap:platform="ios" width="144" height="144"/>
<!-- iPhone / iPod Touch -->
<icon src="res/icon/ios/icon-60.png" gap:platform="ios" width="60" height="60" />
<icon src="res/icon/ios/icon-60#2x.png" gap:platform="ios" width="120" height="120" />
<!-- iPhone 6 / 6+ -->
<icon src="res/icon/ios/icon-60#3x.png" gap:platform="ios" width="180" height="180" />
<!-- Settings Icon -->
<icon src="res/icon/ios/icon-small.png" platform="ios" width="29" height="29" />
<icon src="res/icon/ios/icon-small#2x.png" platform="ios" width="58" height="58" />
<icon src="res/icon/ios/icon-small#3x.png" platform="ios" width="87" height="87" />
<!-- Spotlight Icon -->
<icon src="res/icon/ios/icon-40.png" platform="ios" width="40" height="40" />
<icon src="res/icon/ios/icon-40#2x.png" platform="ios" width="80" height="80" />
<icon src="res/icon/ios/icon-40#3x.png" platform="ios" width="120" height="120" />
<!-- iPhone and iPod touch -->
<gap:splash src="res/screen/ios/Default.png" gap:platform="ios" width="320" height="480" />
<gap:splash src="res/screen/ios/Default#2x.png" gap:platform="ios" width="640" height="960" />
<!-- iPhone 5 / iPod Touch (5th Generation) -->
<gap:splash src="res/screen/ios/Default-568h.png" gap:platform="ios" width="320" height="568" />
<gap:splash src="res/screen/ios/Default-568h#2x.png" gap:platform="ios" width="640" height="1136" />
<!-- iPhone 6 -->
<gap:splash src="res/screen/ios/Default-667h#2x.png" gap:platform="ios" width="750" height="1334" />
<gap:splash src="res/screen/ios/Default-Portrait-736h#3x.png" gap:platform="ios" width="1242" height="2208" />
<gap:splash src="res/screen/ios/Default-Landscape-736h#3x.png" gap:platform="ios" width="2208" height="1242" />
<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:*" />
</widget>
I've also just seen that even in iTunes Connect, when I click on the build, it lists it as iPhone / iPod touch with no iPad... it's only when it's in TestFlight and submitted for review that it appears to be available for iPad?! Where do I go from here?!
And I've just found a way to view the plist from the ipa and even in there the devices are listed as 1 correctly. I am totally baffled! Where do I go from here?
You have already removed the iPad from the device list, but there is no way to avoid the installation on iPad devices. All apps can be installed on devices, but if the app is not iPad ready it will appear as a iPhone app that you can scale to fill the whole iPad screen
As the app will display on iPhone 4 size you don't need an iPad to test if it looks fine. Anyway, you can use the simulators to test

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.

Phonegap/Cordova ios External Links inside iframe not opening in safari

I know we can use inapp browser for opening external links in the app. But I am talking about the links with in iframe, inapp browser solution doesn't work for links inside iframe. I somehow need to open external links from iframe in safari browser of iPhone. Is there a workaround for this ?
Following is my config.xml:
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:gap="http://phonegap.com/ns/1.0" id="com.ocevent.ocevents" version="0.0.1">
<name>Live</name>
<description>Live Eventmanager</description>
<author email="chh_rahul#live.com" href="http://softweavertech.com">Rahul Chhabra</author>
<content src="index.html" />
<allow-navigation href="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<icon src="icons/iphone_57x57.png" gap:platform="ios" width="57" height="57" />
<icon src="icons/iphone_72x72.png" gap:platform="ios" width="72" height="72" />
<icon src="icons/iphone_76x76.png" gap:platform="ios" width="76" height="76" />
<icon src="icons/iphone_120x120.png" gap:platform="ios" width="120" height="120" />
<icon src="icons/iphone_152x152.png" gap:platform="ios" width="152" height="152" />
<icon src="icons/iphone_180x180.png" gap:platform="ios" width="180" height="180" />
<icon src="icons/LiveIcon.png" gap:platform="android" />
<!--splash src="icons/screen.png" gap:platform="android" /-->
<!--icon src="icons/OCEM4-Android_57.png" gap:platform="android" /-->
<plugin name="cordova-plugin-camera" />
<gap:plugin name="cordova-plugin-file" source="pgb" />
<gap:plugin name="cordova-plugin-customurlscheme" source="npm">
<param name="URL_SCHEME" value="live" />
</gap:plugin>
<plugin name="cordova-plugin-whitelist" />
<!--gap:plugin name="com.hutchind.cordova.plugins.streamingmedia" spec="0.1.3" source="pgb" /-->
<gap:plugin name="cordova-plugin-file-transfer" source="pgb" />
<gap:plugin name="cordova-plugin-dialogs" source="pgb" />
<gap:plugin name="cordova-plugin-media-capture" source="pgb" />
<gap:plugin name="cordova-plugin-splashscreen" source="pgb" />
<gap:config-file platform="ios" parent="UIStatusBarHidden">
<true />
</gap:config-file>
<platform name="android">
<!-- you can use any density that exists in the Android project -->
<splash src="icons/screen_640x960.png" density="land-hdpi" />
<splash src="icons/screen_640x960.png" density="land-ldpi" />
<splash src="icons/screen_640x960.png" density="land-mdpi" />
<splash src="icons/screen_640x960.png" density="land-xhdpi" />
<splash src="icons/screen_640x960.png" density="port-hdpi" />
<splash src="icons/screen_640x960.png" density="port-ldpi" />
<splash src="icons/screen_640x960.png" density="port-mdpi" />
<splash src="icons/screen_640x960.png" density="port-xhdpi" />
</platform>
<platform name="ios">
<!-- images are determined by width and height. The following are supported -->
<splash src="icons/screen_320x480.png" width="320" height="480" />
<splash src="icons/screen_640x960.png" width="640" height="960" />
<splash src="icons/screen_768x1024.png" width="768" height="1024" />
<splash src="icons/screen_1536x2048.png" width="1536" height="2048" />
<splash src="icons/screen_1024x768.png" width="1024" height="768" />
<splash src="icons/screen_2048x1536.png" width="2048" height="1536" />
<splash src="icons/screen_640x1136.png" width="640" height="1136" />
<splash src="icons/screen_750x1334.png" width="750" height="1334" />
<splash src="icons/screen_1242x2208.png" width="1242" height="2208" />
<splash src="icons/screen_2208x1242.png" width="2208" height="1242" />
</platform>
<gap:config-file platform="ios" parent="UIViewControllerBasedStatusBarAppearance">
<false />
</gap:config-file>
<preference name="AllowInlineMediaPlayback" value="true" />
<preference name="DisallowOverscroll" value="true" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="5000" />
<preference name="android-build-tool" value="gradle" />
<preference name="phonegap-version" value="cli-5.2.0" />
<preference name="android-minSdkVersion" value="15" />
<preference name="android-targetSdkVersion" value="15" />
<preference name="android-installLocation" value="auto" />
</widget>
Any help would be appreciated.
Thanks
Rahul
Here's a workaround I've made.
Since you're running the Iframe inside a Cordova container, you can modify it's contents.
The idea is to-
"listen" to the iframe page loaded events
Search for the urls you wish to open outside cordova, then backup-and-remove the href property from the html elements inside the iframe.
Instead of the href property, we assign 'onclick' listeners which will "postMessage" to the parent iFrame container (your Cordova webpage probably), where you can handle the click-event and the url link as you see fit, such as opening it via the InAppBrowserPlugin.
And here's the implementation:
// Making sure we're in Cordova environment
if(window['cordova']) {
const linksToModify = [
// *** Modify *** to the correct selector for your IFrame href elemenets you wish to affect, here's an example (You can put multiple elements here):
yourIframe.contentWindow.document.querySelector('#html_element > iframe').contentWindow.document.querySelector('body > a:nth-child(1)'),
];
// Once we have a reference to the elements containing the href urls we remove their href property
// Instead the href property, we "postMessage" to your cordova/phonegap container, where you can handle the href string as you see fit.
for(let el of linksToModify) {
let theHref = el.getAttribute('href');
if(theHref == null) continue;
try {
el.removeAttribute('href');
} catch(_) {}
try {
el.removeAttribute('target');
} catch(_) {}
// Notify parent iframe of the click instead of opening the url in browser
el.setAttribute('onclick', "parent.postMessage({type:'fromIframe',event:'open',link:'" + theHref + "'},'*');")
}
}
Modify the element selector for your specific iframe elements which contain href attributes.
Tip-You might want to run the code block after page load under a timer with retries, In my case, I used 15 max retries (1 per second).
Once the element is found and the href attributes are removed, you can cancel the timer of course.
Afterwards, add the listener in the parent container (your Cordova webpage js code):
window.addEventListener('message', function(thePostedMessage) {
/// Handle link as you wish, it's in "thePostedMessage" argument.
}

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>

Resources