In my Cordova + React app, I use SVG Icons, so when I render an Icon I render the React component
<svg className="icon">
<use xlinkHref="assets/icons.svg#icon-plus-circle"></use>
</svg>
This used to work fine, but after installing cordova-plugin-wkwebview-engine, which causes the app to use WKWebView instead of UIWebView, the icons are no longer visible.
In the console I get this error (formatted)
file:///var/mobile/Containers/Data/Application/34505CDC-DA39-4A04-8A61-1D99969F311B/Library/Application%20Support/com.mycompany.myapp/cordova-hot-code-push-plugin/2017.03.02-19.54.54/www//assets/icons.svg#icon-plus-circle
from frame with URL
file:///var/mobile/Containers/Data/Application/34505CDC-DA39-4A04-8A61-1D99969F311B/Library/Application%20Support/com.mycompany.myapp/cordova-hot-code-push-plugin/2017.03.02-19.54.54/www//index.html.
Domains, protocols and ports must match.
Why do I get this error? As far as I can tell, thte domain, protocols and ports do match so I don't understand why it is complaining.
This is my config.xml:
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.menigo.menigoapp" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>App</name>
<description>
App
</description>
<author email="test#example.com" href="http://www.example.com">
Company
</author>
<content src="index.html" />
<plugin name="cordova-plugin-whitelist" spec="1" />
<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:*" />
<!--
ldpi : 36x36 px
mdpi : 48x48 px
hdpi : 72x72 px
xhdpi : 96x96 px
xxhdpi : 144x144 px
xxxhdpi : 192x192 px
-->
<icon src="res/icon.png" density="ldpi" />
<icon src="res/icon.png" density="mdpi" />
<icon src="res/icon.png" density="hdpi" />
<icon src="res/icon.png" density="xhdpi" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
<!-- iOS 8.0+ -->
<!-- iPhone 6 Plus -->
<icon src="res/icon.png" width="180" height="180" />
<!-- iOS 7.0+ -->
<!-- iPhone / iPod Touch -->
<icon src="res/icon.png" width="60" height="60" />
<icon src="res/icon.png" width="120" height="120" />
<!-- iPad -->
<icon src="res/icon.png" width="76" height="76" />
<icon src="res/icon.png" width="152" height="152" />
<!-- Spotlight Icon -->
<icon src="res/icon.png" width="40" height="40" />
<icon src="res/icon.png" width="80" height="80" />
<!-- iOS 6.1 -->
<!-- iPhone / iPod Touch -->
<icon src="res/icon.png" width="57" height="57" />
<icon src="res/icon.png" width="114" height="114" />
<!-- iPad -->
<icon src="res/icon.png" width="72" height="72" />
<icon src="res/icon.png" width="144" height="144" />
<!-- iPhone Spotlight and Settings Icon -->
<icon src="res/icon.png" width="29" height="29" />
<icon src="res/icon.png" width="58" height="58" />
<!-- iPad Spotlight and Settings Icon -->
<icon src="res/icon.png" width="50" height="50" />
<icon src="res/icon.png" width="100" height="100" />
<!-- iPad Pro -->
<icon src="res/icon.png" width="167" height="167" />
</platform>
<engine name="ios" spec="~4.3.1" />
<engine name="android" spec="~6.0.0" />
<plugin name="cordova-sqlite-storage" spec="~2.0.0" />
<chcp>
<auto-download enabled="false" />
<native-interface version="5" />
</chcp>
<preference name="Orientation" value="portrait" />
<preference name="DisallowOverscroll" value="true" />
<preference name="BackupWebStorage" value="none" />
</widget>
This is my content-security-policy:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: blob: gap: * 'unsafe-eval' 'unsafe-inline'; style-src 'self' fonts.googleapis.com 'unsafe-inline'; media-src *; img-src 'self' data: content: blob:;">
Related
I created a fresh Cordova for iOS project trough the CLI and opened it in Xcode.
After choosing Archive -> Distibute this error comes up at the end of the uploading to the AppStore process.
ERROR ITMS-90022: "Missing required icon file. The bundle does not
contain an app icon for iPhone / iPod Touch of exactly '120x120'
pixels, in .png format for iOS versions >= 7.0."
Setup:
Cordova Version: 9.0.0 (cordova-lib#9.0.1)
Xcode Version: 11.2.1
macOS Version: 10.15
config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.example.app" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>Example</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev#cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<plugin name="cordova-plugin-whitelist" spec="1" />
<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">
<!-- iOS 8.0+ -->
<!-- iPhone 6 Plus -->
<icon src="res/ios/icon-60#3x.png" width="180" height="180" />
<!-- iOS 7.0+ -->
<!-- iPhone / iPod Touch -->
<icon src="res/ios/icon-60.png" width="60" height="60" />
<icon src="res/ios/icon-60#2x.png" width="120" height="120" />
<!-- iPad -->
<icon src="res/ios/icon-76.png" width="76" height="76" />
<icon src="res/ios/icon-76#2x.png" width="152" height="152" />
<!-- Spotlight Icon -->
<icon src="res/ios/icon-40.png" width="40" height="40" />
<icon src="res/ios/icon-40#2x.png" width="80" height="80" />
<!-- iOS 6.1 -->
<!-- iPhone / iPod Touch -->
<icon src="res/ios/icon.png" width="57" height="57" />
<icon src="res/ios/icon#2x.png" width="114" height="114" />
<!-- iPad -->
<icon src="res/ios/icon-72.png" width="72" height="72" />
<icon src="res/ios/icon-72#2x.png" width="144" height="144" />
<!-- iPad Pro -->
<icon src="res/ios/icon-167.png" width="167" height="167" />
<!-- iPhone Spotlight and Settings Icon -->
<icon src="res/ios/icon-small.png" width="29" height="29" />
<icon src="res/ios/icon-small#2x.png" width="58" height="58" />
<icon src="res/ios/icon-small#3x.png" width="87" height="87" />
<!-- iPad Spotlight and Settings Icon -->
<icon src="res/ios/icon-50.png" width="50" height="50" />
<icon src="res/ios/icon-50#2x.png" width="100" height="100" />
<!-- iPad Pro -->
<icon src="res/ios/icon-83.5#2x.png" width="167" height="167" />
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
</widget>
CLI commands:
cordova create example com.example.app Example
(cd example)
cordova platform add ios
cordova plugin add cordova-plugin-splashscreen
cordova-icon
cordova-splash
What I tried: Clean up build folder / Update Node/NPM / Update Xcode
Every icon is in the image assets folder. How to fix this error?
Looks like you are missing references for all icons. This is what you need to have in your config.xml for all icons to be set, in the ios node
<icon height="29" platform="ios" src="res/icons/ios/icon-29.png" width="29" />
<icon height="40" platform="ios" src="res/icons/ios/icon-40.png" width="40" />
<icon height="48" platform="ios" src="res/icons/ios/icon-48.png" width="48" />
<icon height="50" platform="ios" src="res/icons/ios/icon-50.png" width="50" />
<icon height="55" platform="ios" src="res/icons/ios/icon-55.png" width="55" />
<icon height="57" platform="ios" src="res/icons/ios/icon-57.png" width="57" />
<icon height="58" platform="ios" src="res/icons/ios/icon-58.png" width="58" />
<icon height="60" platform="ios" src="res/icons/ios/icon-60.png" width="60" />
<icon height="72" platform="ios" src="res/icons/ios/icon-72.png" width="72" />
<icon height="76" platform="ios" src="res/icons/ios/icon-76.png" width="76" />
<icon height="80" platform="ios" src="res/icons/ios/icon-80.png" width="80" />
<icon height="87" platform="ios" src="res/icons/ios/icon-87.png" width="87" />
<icon height="88" platform="ios" src="res/icons/ios/icon-88.png" width="88" />
<icon height="100" platform="ios" src="res/icons/ios/icon-100.png" width="100" />
<icon height="114" platform="ios" src="res/icons/ios/icon-114.png" width="114" />
<icon height="120" platform="ios" src="res/icons/ios/icon-120.png" width="120" />
<icon height="144" platform="ios" src="res/icons/ios/icon-144.png" width="144" />
<icon height="152" platform="ios" src="res/icons/ios/icon-152.png" width="152" />
<icon height="167" platform="ios" src="res/icons/ios/icon-167.png" width="167" />
<icon height="172" platform="ios" src="res/icons/ios/icon-172.png" width="172" />
<icon height="180" platform="ios" src="res/icons/ios/icon-180.png" width="180" />
<icon height="196" platform="ios" src="res/icons/ios/icon-196.png" width="196" />
<icon height="216" platform="ios" src="res/icons/ios/icon-216.png" width="216" />
<icon height="1024" platform="ios" src="res/icons/ios/icon-1024.png" width="1024" />
I have an iOS app developed using Cordova (ios engine 4.4.0) in TestFlight. It all works great, except with the latest iOS 12 beta.
Users reported that the app restarts itself randomly on iOS 12 (iPhoneX). This happens randomly, possibly triggered by user interaction with the DOM, but not always.
I've tested on my own iPhone6S with iOS 12 and haven't reproduced it, so I wonder if it's specific to iPhoneX + iOS 12.
Users don't have a crash report for the app, which makes me think it's the WebView reloading the page (it's a single page app), rather than an actual app crash.
This doesn't happen on any other device or iOS version - has anyone else experienced this or have a solution?
Here is the main section of my Cordova config.xml:
<content src="index.html" />
<preference name="BackupWebStorage" value="local" />
<feature name="CDVWKWebViewEngine">
<param name="ios-package" value="CDVWKWebViewEngine" />
</feature>
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
<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:*" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />
<preference name="KeepRunning" value="false" />
<preference name="Fullscreen" value="true" />
<platform name="android">
<allow-intent href="market:*" />
<icon density="ldpi" src="res/android/ldpi.png" />
<icon density="mdpi" src="res/android/mdpi.png" />
<icon density="hdpi" src="res/android/hdpi.png" />
<icon density="xhdpi" src="res/android/xhdpi.png" />
<icon density="xxhdpi" src="res/android/xxhdpi.png" />
<icon density="xxxhdpi" src="res/android/xxxhdpi.png" />
<splash density="land-hdpi" src="res/screen/android/drawable-land-hdpi.png" />
<splash density="land-ldpi" src="res/screen/android/drawable-land-ldpi.png" />
<splash density="land-mdpi" src="res/screen/android/drawable-land-mdpi.png" />
<splash density="land-xhdpi" src="res/screen/android/drawable-land-xhdpi.png" />
<splash density="land-xxhdpi" src="res/screen/android/drawable-land-xxhdpi.png" />
<splash density="land-xxxhdpi" src="res/screen/android/drawable-land-xxxhdpi.png" />
<splash density="port-hdpi" src="res/screen/android/drawable-port-hdpi.png" />
<splash density="port-ldpi" src="res/screen/android/drawable-port-ldpi.png" />
<splash density="port-mdpi" src="res/screen/android/drawable-port-mdpi.png" />
<splash density="port-xhdpi" src="res/screen/android/drawable-port-xhdpi.png" />
<splash density="port-xxhdpi" src="res/screen/android/drawable-port-xxhdpi.png" />
<splash density="port-xxxhdpi" src="res/screen/android/drawable-port-xxxhdpi.png" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
<feature name="StatusBar">
<param name="ios-package" onload="true" value="CDVStatusBar" />
</feature>
<icon height="180" src="res/ios/icon-60#3x.png" width="180" />
<icon height="60" src="res/ios/icon-60.png" width="60" />
<icon height="120" src="res/ios/icon-60#2x.png" width="120" />
<icon height="76" src="res/ios/icon-76.png" width="76" />
<icon height="152" src="res/ios/icon-76#2x.png" width="152" />
<icon height="40" src="res/ios/icon-40.png" width="40" />
<icon height="80" src="res/ios/icon-40#2x.png" width="80" />
<icon height="57" src="res/ios/icon.png" width="57" />
<icon height="114" src="res/ios/icon#2x.png" width="114" />
<icon height="72" src="res/ios/icon-72.png" width="72" />
<icon height="144" src="res/ios/icon-72#2x.png" width="144" />
<icon height="167" src="res/ios/icon-167.png" width="167" />
<icon height="29" src="res/ios/icon-small.png" width="29" />
<icon height="58" src="res/ios/icon-small#2x.png" width="58" />
<icon height="50" src="res/ios/icon-50.png" width="50" />
<icon height="100" src="res/ios/icon-50#2x.png" width="100" />
<icon height="167" src="res/ios/icon-83.5#2x.png" width="167" />
<splash src="res/screen/ios/Default#2x~universal~anyany.png" />
</platform>
<plugin name="cordova-plugin-file" spec="^5.0.0" />
<plugin name="cordova-plugin-ionic-webview" spec="^1.1.14" />
<plugin name="cordova-plugin-splashscreen" spec="^4.1.0" />
<plugin name="cordova-plugin-statusbar" spec="^2.2.2" />
<plugin name="cordova-plugin-whitelist" spec="^1.3.1" />
<plugin name="cordova-plugin-screen-orientation" spec="^3.0.1" />
<engine name="ios" spec="^4.4.0" />
We also hit this issue with our Cordova app, and it took us ages to solve.
After recently switching to wkwebview, a file uploader page in the app started reloading often before the file uploads completed. It only happened for users with iPhone X & iOS 12. In our case, changing a Bootstrap spinner control resolved things. Seems crazy... but once we modified the component, the problem went away.
I am using plugins cordova-plugin-inappbrowser and cordova-plugin-wkwebview in my app with ios.
But loadstop event does not work so because of this issue I am also not able to close inappbrowser on loadstop event.
It works perfectly fine without wekwebview.
I added code of example project to reproduce this issue:
config.xml
<?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>Hello World</name>
<description>
Hello World sample application
</description>
<author href="http://phonegap.com" email="support#phonegap.com">
PhoneGap Team
</author>
rmission on your app, which PhoneGap requires.
-->
<preference name="permissions" value="none"/>
<preference name="auto-hide-splash-screen" value="true" />
<gap:plugin name="cordova-plugin-wkwebview" source="npm" />
<gap:plugin name="cordova-plugin-inappbrowser" source="npm" />
<gap:plugin name="org.crosswalk.engine" spec="1.3.0" source="pgb" />
<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" />
<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>
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<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" />
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<title>Hello World</title>
</head>
<body>
<br><br><br>
<button onclick="login()">Open web</button>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
function login(){
var ref = window.open('http://www.google.com', '_blank', 'location=no');
ref.addEventListener('loadstop', function(event){
alert('from load stop');
ref.close();
});
}
</script>
</body>
</html>
It works perfectly fine if android but this issue is in ios only.
I am using phonegap build to build app.
I researched a lot but could not find any perfect solution yet.
I'll really appreciate any contribution.
Thanks
I have just been through the wringer with InAppBrowser and WKWebView as well so I share your pain!
What I found is that the events were being fired by the InAppbrowser window itself, rather than the URL content in the window. So Loadstop was being fired each time the InAppBrowser window was shown in the App, not when the URL had finished loading.
My advice, and other people's on various discussion groups, is to forget using the two together until WKWebView is stable and the InAppBrowser has been designed for it. So just pick which one you really need and bin the other one.
I know it's not really a solution, but after I binned WKWebView all my events started behaving as expected.
Tom
I have an app that works 100% when running the phonegap windows program and then the phonegap app on my iphone.
However when I upload it to phonegap build then add the app to my phone via itunes the app is just a blank white screen.
Im using jquery mobile, socket.io and geolocation if any of that matters. Is it a whitelist issue?
What could be causing this?
I'm zipping the folder of my app that has a directory like this:
.cordova
hooks
platforms
plugins
www
config.xml
and here is my config file:
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.phonegap.helloworld" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
<name>test</name>
<description>Hello World sample application that responds to the deviceready event.</description>
<author email="support#phonegap.com" href="http://phonegap.com">PhoneGap Team</author>
<content src="index.html" />
<preference name="permissions" value="none" />
<preference name="orientation" value="default" />
<preference name="target-device" value="universal" />
<preference name="fullscreen" value="true" />
<preference name="webviewbounce" 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="14" />
<preference name="android-installLocation" value="auto" />
<gap:plugin name="org.apache.cordova.battery-status" />
<gap:plugin name="org.apache.cordova.camera" />
<gap:plugin name="org.apache.cordova.media-capture" />
<gap:plugin name="org.apache.cordova.console" />
<gap:plugin name="org.apache.cordova.contacts" />
<gap:plugin name="org.apache.cordova.device" />
<gap:plugin name="org.apache.cordova.device-motion" />
<gap:plugin name="org.apache.cordova.device-orientation" />
<gap:plugin name="org.apache.cordova.dialogs" />
<gap:plugin name="org.apache.cordova.file" />
<gap:plugin name="org.apache.cordova.file-transfer" />
<gap:plugin name="org.apache.cordova.geolocation" />
<gap:plugin name="org.apache.cordova.globalization" />
<gap:plugin name="org.apache.cordova.inappbrowser" />
<gap:plugin name="org.apache.cordova.media" />
<gap:plugin name="org.apache.cordova.network-information" />
<gap:plugin name="org.apache.cordova.splashscreen" />
<gap:plugin name="org.apache.cordova.vibration" />
<icon src="icon.png" />
<icon gap:platform="android" gap:qualifier="ldpi" src="www/res/icon/android/icon-36-ldpi.png" />
<icon gap:platform="android" gap:qualifier="mdpi" src="www/res/icon/android/icon-48-mdpi.png" />
<icon gap:platform="android" gap:qualifier="hdpi" src="www/res/icon/android/icon-72-hdpi.png" />
<icon gap:platform="android" gap:qualifier="xhdpi" src="www/res/icon/android/icon-96-xhdpi.png" />
<icon gap:platform="blackberry" src="www/res/icon/blackberry/icon-80.png" />
<icon gap:platform="blackberry" gap:state="hover" src="www/res/icon/blackberry/icon-80.png" />
<icon gap:platform="ios" height="57" src="www/res/icon/ios/icon-57.png" width="57" />
<icon gap:platform="ios" height="72" src="www/res/icon/ios/icon-72.png" width="72" />
<icon gap:platform="ios" height="114" src="www/res/icon/ios/icon-57-2x.png" width="114" />
<icon gap:platform="ios" height="144" src="www/res/icon/ios/icon-72-2x.png" width="144" />
<icon gap:platform="webos" src="www/res/icon/webos/icon-64.png" />
<icon gap:platform="winphone" src="www/res/icon/windows-phone/icon-48.png" />
<icon gap:platform="winphone" gap:role="background" src="www/res/icon/windows-phone/icon-173-tile.png" />
<gap:splash gap:platform="android" gap:qualifier="port-ldpi" src="www/res/screen/android/screen-ldpi-portrait.png" />
<gap:splash gap:platform="android" gap:qualifier="port-mdpi" src="www/res/screen/android/screen-mdpi-portrait.png" />
<gap:splash gap:platform="android" gap:qualifier="port-hdpi" src="www/res/screen/android/screen-hdpi-portrait.png" />
<gap:splash gap:platform="android" gap:qualifier="port-xhdpi" src="www/res/screen/android/screen-xhdpi-portrait.png" />
<gap:splash gap:platform="blackberry" src="www/res/screen/blackberry/screen-225.png" />
<gap:splash gap:platform="ios" height="480" src="www/res/screen/ios/screen-iphone-portrait.png" width="320" />
<gap:splash gap:platform="ios" height="960" src="www/res/screen/ios/screen-iphone-portrait-2x.png" width="640" />
<gap:splash gap:platform="ios" height="1136" src="www/res/screen/ios/screen-iphone-portrait-568h-2x.png" width="640" />
<gap:splash gap:platform="ios" height="1024" src="www/res/screen/ios/screen-ipad-portrait.png" width="768" />
<gap:splash gap:platform="ios" height="768" src="www/res/screen/ios/screen-ipad-landscape.png" width="1024" />
<gap:splash gap:platform="winphone" src="www/res/screen/windows-phone/screen-portrait.jpg" />
<access origin="*" />
<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>
<engine name="ios" spec="~3.9.2" />
</widget>
Canned Message
I need to blog this, so i don't have to repeat this answer again and again.
You cannot use Phonegap Desktop App with Phonegap Build.
Phonegap Desktop App uses Phonegap CLI, so if you want to use Phonegap Desktop App you need to stay with Phonegap CLI.
If you want to use Phonegap Build, then forget what you have done and start over OR make Minor modifications to move Phonegap Desktop App to Phonegap Build. To be clear, the difference is minor, but enough to keep tripping you.
Also, you will not be able to use Phonegap Developer App as that is meant to work with Phonegap Desktop App. You cannot use either CLI or Build with Developer App.
FWIW: I've been trying to get Phonegap to fix this. Here is the report on the issue.
Here are the minor modifcations:
For Phonegap Build, index.html and config.xml both sit in the root directory and there is no www/ directory. No other items are required, and infact you want to remove anything not list in index.html before uploading to build.phonegap.com.
For Cordova/Phonegap CLI, config.xml is in the root directory and index.html sits in the www/ directory
launch-external does not seems to work for iOS. but it works perfectly for android.
I am looking for a 'launch-external' equivalent for iOS, i am using cardova (version 3.7.0) and phoneGap online build tool.
below is my config.xml
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" id="com.something.something" version="1.0.3">
<name>something</name>
<description>
something
</description>
<author href="http://something.com" email="something#something.com">Something</author>
<content src="index.html"/>
<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="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="true"/>
<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="7"/>
<preference name="android-installLocation" value="auto"/>
<preference name="DisallowOverscroll" value="true" />
<gap:plugin name="org.apache.cordova.console"/>
<gap:plugin name="org.apache.cordova.device"/>
<gap:plugin name="org.apache.cordova.dialogs"/>
<gap:plugin name="org.apache.cordova.geolocation"/>
<gap:plugin name="org.apache.cordova.globalization"/>
<gap:plugin name="org.apache.cordova.inappbrowser"/>
<gap:plugin name="org.apache.cordova.network-information"/>
<gap:plugin name="org.apache.cordova.vibration"/>
<gap:plugin name="org.apache.cordova.statusbar"/>
<gap:plugin name="org.apache.cordova.splashscreen"/>
<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/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"/>
<!-- iPhone 6 / 6+ -->
<icon src="res/icon/ios/icon-60#3x.png" gap:platform="ios" width="180" height="180" />
<!-- 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" />
<!-- iPad -->
<icon src="res/icon/ios/icon-76.png" gap:platform="ios" width="76" height="76" />
<icon src="res/icon/ios/icon-76#2x.png" gap:platform="ios" width="152" height="152" />
<!-- Settings Icon -->
<!--
<icon src="res/icon/ios/icon-small.png" gap:platform="ios" width="29" height="29" />
<icon src="res/icon/ios/icon-small#2x.png" gap:platform="ios" width="58" height="58" />
-->
<!-- Spotlight Icon -->
<!--
<icon src="res/icon/ios/icon-40.png" gap:platform="ios" width="40" height="40" />
<icon src="res/icon/ios/icon-40#2x.png" gap:platform="ios" width="80" height="80" />
-->
<platform name="ios">
<!-- images are determined by width and height. The following are supported -->
<splash src="res/screen/ios/Default~iphone.png" width="320" height="480"/>
<splash src="res/screen/ios/Default#2x~iphone.png" width="640" height="960"/>
<splash src="res/screen/ios/Default-Portrait~ipad.png" width="768" height="1024"/>
<splash src="res/screen/ios/Default-Landscape~ipad.png" width="1024" height="768"/>
<splash src="res/screen/ios/Default-568h#2x~iphone.png" width="640" height="1136"/>
</platform>
<access origin="sms:*" launch-external="yes" />
<access origin="geo:*" launch-external="yes" />
<access origin="mailto:*" launch-external="yes" />
<access origin="tel:*" launch-external="yes" />
<access origin="http://*" launch-external="yes" />
<plugin name="cordova-plugin-whitelist"/>
<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>
I am using location.href in index.html to open the url in separte browser. This is working in Android as expected but not in iOS
In the documentation, launch-external is only mentioned in the Android section. That's probably why it doesn't work for iOS.
As an alternative, you could use the InAppBrowser plugin (don't be fooled by its name) to open certain links externally, but this requires you to rewrite those links to window.open calls, with the target parameter set to _system.
I tried all of these suggestions in a recent iOS build and the only thing that worked for me was the InAppBrowser plugin and changing the code to window.open(href,"_system");