Is there anybody can help me with splash screen.
I created my index.html using jquery mobile , everthing is fine but i need a splash screen.
<html>
<head>
<title>Mobilizm</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/jquery.mobile-1.3.2.min.css" rel="stylesheet" />
</head>
<body onload="onLoad()">
<div data-role="page">
<div data-theme="b" data-role="header">
<h3>Mobilizm</h3>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<ul data-role="listview">
<li>Rezervasyon Yap</li>
<li>Rezervasyonlarımı Gör</li>
<li>Bilgilerim</li>
</ul>
</div>
</div>
<div data-theme="b" data-role="footer" data-position="fixed">
<h3>Mobilizm</h3>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.3.2.js"></script>
</body>
</html>
I added my config.xml file but when ı open my application , there is no splash screen
Any ideas?
Config XML :
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "HelloWorld.Application"
version = "1.0.0"
versionCode = "1">
<name>Mobilizm</name>
<description>
Mobilizm mobile application for android
</description>
<author href="#" email="polattt#gmail.com">
Daniele Veneroni
</author>
<!-- SPLASH SCREENS -->
<gap:splash src="css/splash/splash.png" /> <!-- default 320x480 pixels -->
<!--<gap:splash src="css/splash/ios/splash320x480.png" gap:platform="ios" width="320" height="480" /> --><!-- iPhone 3G, 3GS, iPod Touch 2, 3 --><!--
<gap:splash src="css/splash/ios/splash640x960.png" gap:platform="ios" width="640" height="960" /> --><!-- iPhone 4, 4S, iPod Touch 4 --><!--
<gap:splash src="css/splash/ios/splash640x1136.png" gap:platform="ios" width="640" height="1136" /> --><!-- iPhone 5, iPod Touch 5 --><!--
<gap:splash src="css/splash/ios/splash1024x768.png" gap:platform="ios" width="1024" height="768" /> --><!-- iPad 1, 2, iPad mini --><!--
<gap:splash src="css/splash/ios/splash768x1024.png" gap:platform="ios" width="768" height="1024" /> --><!-- iPad 1, 2, iPad mini --><!--
<gap:splash src="css/splash/ios/splash2048x1496.png" gap:platform="ios" width="2048" height="1496" /> --><!-- iPad 3, 4 --><!--
<gap:splash src="css/splash/ios/splash1536x2008.png" gap:platform="ios" width="1536" height="2008" /> --><!-- iPad 3, 4 -->
<gap:splash src="css/splash/android/ldpi.png" gap:platform="android" gap:density="ldpi" /> <!-- 200x320 -->
<gap:splash src="css/splash/android/mdpi.png" gap:platform="android" gap:density="mdpi" /> <!-- 320x480 -->
<gap:splash src="css/splash/android/hdpi.png" gap:platform="android" gap:density="hdpi" /> <!-- 480x800 -->
<gap:splash src="css/splash/android/xhdpi.png" gap:platform="android" gap:density="xhdpi" /> <!-- 720x1280 -->
<!-- GENERAL PREFERENCES -->
<preference name="phonegap-version" value="2.9.0" />
<preference name="orientation" value="default" />
<preference name="target-device" value="universal" />
<preference name="fullscreen" value="true" /> <!-- remove the upper bar on iOS and Android -->
<!-- iOS PREFERENCES -->
<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="false" />
<preference name="exit-on-suspend" value="false" />
<preference name="show-splash-screen-spinner" value="false" />
<preference name="auto-hide-splash-screen" value="true" /> <!-- if set to false, the splash screen must be hidden using a JavaScript API -->
<!-- ANDROID PREFERENCES -->
<preference name="android-minSdkVersion" value="7" /> <!-- minimum Android 2.1 -->
<preference name="android-installLocation" value="auto" />
<preference name="splash-screen-duration" value="3000" />
<preference name="load-url-timeout" value="20000" />
<!-- BLACKBERRY PREFERENCES -->
<preference name="disable-cursor" value="false" />
<!-- PHONEGAP API FEATURES PREFERENCES -->
<preference name="permissions" value="none"/>
</widget>
Mastazi thanks for ur interest ,
i finally solved the issue. There is no script needed. After changing the size of the images it worked. i edited my xml above
I think you don't need any script .you just add image in src folder as in native application in android..
UPDATE this is NOT the right answer. See the OP's own answer.
It looks like you didn't write the javascript to load the splashcreen inside the head tag. Something like (example taken from the documentation at http://docs.phonegap.com/en/2.2.0/cordova_splashscreen_splashscreen.md.html ):
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady() {
navigator.splashscreen.show();
}
Just add this in your java file :
splash is your PNG file's name in folders : drawable
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
super.setIntegerProperty("splashscreen", R.drawable.splash);
// Set by <content src="index.html" /> in config.xml
super.loadUrl(Config.getStartUrl(),3000);
}
Related
I'm using cordova splash-screen plugin and for some reason the image is not displaying it shows a splash-screen for the seconds specified in the code but the exact image is not displayed
here is a screen-shot:
I've tried to add the images to multiple sources ( once in the main folder, once in the www folder, tried adding all the images to drawable folders if thats a known thing, also have tried https://pgicons.abiro.com/ and its xml file same problem)
here my xml code
<?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">
<platform name="android">
<!-- you can use any density that exists in the Android project
<splash src="splash.png" />
-->
<splash src="www/res/screen/android/ldpi.png" density="land-ldpi" />
<splash src="www/res/screen/android/mdpi.png" density="land-mdpi" />
<splash src="www/res/screen/android/hdpi.png" density="land-hdpi"/>
<splash src="www/res/screen/android/xhdpi.png" density="land-xhdpi" />
<splash src="www/res/screen/android/xxhdpi.png" density="land-xxhdpi" />
<platform name="ios">
<splash platform="ios" src="www/res/screen/ios/320x480.png" width="320" height="480"/>
<splash platform="ios" src="www/res/screen/ios/640x960.png" width="640" height="960"/>
<splash platform="ios" src="www/res/screen/ios/768x1024.png" width="768" height="1024"/>
<splash platform="ios" src="www/res/screen/ios/1536x2048.png" width="1536" height="2048"/>
<splash platform="ios" src="www/res/screen/ios/640x1136.png" width="640" height="1136"/>
<splash platform="ios" src="www/res/screen/ios/750x1334.png" width="750" height="1334"/>
<splash platform="ios" src="www/res/screen/ios/2208x1242.png" width="2208" height="1242"/>
<splash platform="ios" src="www/res/screen/ios/1242x2208.png" width="1242" height="2208"/>
</platform>
<platform name="browser">
<preference name="SplashScreen" value="screen.png" /> <!-- defaults to "/img/logo.png" -->
<preference name="SplashScreenWidth" value="600" /> <!-- defaults to "170" -->
<preference name="SplashScreenHeight" value="300" /> <!-- defaults to "200" -->
</platform>
</platform>
<preference name="SplashScreen" value="screen"/>
<preference name="SplashScreenDelay" value="5000" />
<name>Project</name>
<description>
A blank PhoneGap app.
</description>
<author email="support#phonegap.com" href="http://phonegap.com">
PhoneGap Team
</author>
<content src="index.html" />
<access origin="*" />
</widget>
here is the xml code generated by https://pgicons.abiro.com/
<?xml version='1.0' encoding='utf-8'?>
<widget xmlns="http://www.w3.org/ns/widgets">
<splash src="splash.png" />
<platform name="ios">
<icon height="1024" src="res/icon/ios/icon-1024.png" width="1024" />
<icon height="29" src="res/icon/ios/icon-small.png" width="29" />
<icon height="58" src="res/icon/ios/icon-small#2x.png" width="58" />
<icon height="87" src="res/icon/ios/icon-small#3x.png" width="87" />
<icon height="40" src="res/icon/ios/icon-small-40.png" width="40" />
<icon height="80" src="res/icon/ios/icon-small-40#2x.png" width="80" />
<icon height="120" src="res/icon/ios/icon-small-40#3x.png" width="120" />
<icon height="50" src="res/icon/ios/icon-small-50.png" width="50" />
<icon height="100" src="res/icon/ios/icon-small-50#2x.png" width="100" />
<icon height="57" src="res/icon/ios/icon.png" width="57" />
<icon height="114" src="res/icon/ios/icon#2x.png" width="114" />
<icon height="60" src="res/icon/ios/icon-60.png" width="60" />
<icon height="120" src="res/icon/ios/icon-60#2x.png" width="120" />
<icon height="180" src="res/icon/ios/icon-60#3x.png" width="180" />
<icon height="72" src="res/icon/ios/icon-72.png" width="72" />
<icon height="144" src="res/icon/ios/icon-72#2x.png" width="144" />
<icon height="76" src="res/icon/ios/icon-76.png" width="76" />
<icon height="152" src="res/icon/ios/icon-76#2x.png" width="152" />
<icon height="167" src="res/icon/ios/icon-167.png" width="167" />
<icon height="167" src="res/icon/ios/icon-83.5#2x.png" width="167" />
<splash src="res/screen/ios/Default#2x~iphone~anyany.png" />
<splash src="res/screen/ios/Default#2x~iphone~comany.png" />
<splash src="res/screen/ios/Default#3x~iphone~anyany.png" />
<splash src="res/screen/ios/Default#3x~iphone~comany.png" />
<splash src="res/screen/ios/Default#2x~ipad~anyany.png" />
<splash src="res/screen/ios/Default#2x~ipad~comany.png" />
</platform>
<platform name="android">
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="SplashShowOnlyFirstTime" value="true" />
<icon density="ldpi" src="res/icon/android/ldpi.png" />
<icon density="mdpi" src="res/icon/android/mdpi.png" />
<icon density="hdpi" src="res/icon/android/hdpi.png" />
<icon density="xhdpi" src="res/icon/android/xhdpi.png" />
<icon density="xxhdpi" src="res/icon/android/xxhdpi.png" />
<icon density="xxxhdpi" src="res/icon/android/xxxhdpi.png" />
<splash density="port-ldpi" src="res/screen/android/splash-port-ldpi.png" />
<splash density="port-mdpi" src="res/screen/android/splash-port-mdpi.png" />
<splash density="port-hdpi" src="res/screen/android/splash-port-hdpi.png" />
<splash density="port-xhdpi" src="res/screen/android/splash-port-xhdpi.png" />
<splash density="port-xxhdpi" src="res/screen/android/splash-port-xxhdpi.png" />
<splash density="port-xxxhdpi" src="res/screen/android/splash-port-xxxhdpi.png" />
<splash density="port-ldpi" src="www/res/drawable-port-ldpi/splash-port-ldpi.png" />
<splash density="port-mdpi" src="www/res/drawable-port-mdpi/splash-port-mdpi.png" />
<splash density="port-hdpi" src="www/res/drawable-port-hdpi/splash-port-hdpi.png" />
<splash density="port-xhdpi" src="www/res/drawable-port-xhdpi/splash-port-xhdpi.png" />
<splash density="port-xxhdpi" src="www/res/drawable-port-xxhdpi/splash-port-xxhdpi.png" />
<splash density="port-xxxhdpi" src="www/res/drawable-port-xxxhdpi/splash-port-xxxhdpi.png" />
</platform>
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="5000" />
<name>Splash screen Project</name>
<description>
A PhoneGap app to test splash screen.
</description>
<author>
Sara
</author>
</widget>
here is a screen shot at both project folders and images sources
my configuration:
pgicons configuration:
here is indx.html code for both projects
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>current location</title>
<script type="text/javascript" charset="utf-8">
</script>
</head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<body>
<h1>hello</h1>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
</body>
</html>
I've added the platforms using terminal (cordova platform add android) I've tried deleting the platforms and add them again
the plugin was added using the terminal too, tried to remove it and added it again didn't work
I check using phonegap local host / bluestacks android emulator / i've also tried to use adobe phonegap build and test the app using bluestacks. the icon works fine its only the splash screen
if you need me to add any details please don't hesitate to ask
I'm stuck in here for a week now and I was assigned to finish it in two days :(
I have solved this issue, after updating the splash plugin line
from
<plugin name="cordova-plugin-splashscreen" source="npm" />
to
<plugin name="cordova-plugin-splashscreen" spec="5.0.2" />
after adding the spec it worked
I am adding main.html index.js and config.xml file for plugin versions and phonegap versions and yes, I am making builds online using build.phonegap.com.
Even I tried to verify with gmail.com; in that also attach file function is not working I have confirmed that.
It is compulsory form me to use in app browser as I need to load an external website using phonegap wrapper. I could use iframe but it's not working in iOS.
Here is my index.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" />
<title>experiment</title>
</head>
<body>
Select a file: <input type="file" name="img">
</body>
</html>
Here is my index.js:
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
var ref = window.open('main.html', ' _blank', 'location=no,hidden=yes,toolbar=no,scrollbars=no');
ref.addEventListener('loadstart', function(event) { alert("load start");
});
ref.addEventListener('loadstop', function(event) { alert("load stop");
ref.show(); });
}
};
Here is my 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 that responds to the deviceready event.
</description>
<author href="http://phonegap.com" email="support#phonegap.com">
PhoneGap Team
</author>
<preference name="phonegap-version" value="cli-5.2.0" />
<preference name="permissions" value="none"/>
<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="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="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. -->
<!-- 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" version="1.0.0" source="npm"/>
<plugin name="cordova-plugin-media" />
<plugin name="cordova-plugin-network-information" />
<plugin name="cordova-plugin-splashscreen" />
<plugin name="cordova-plugin-vibration" />
<!-- 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>
<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>
</widget>
I've built a hybrid Phonegap app. I'm a Android user, so I've tested it on KitKat, and it worked. I've sent it to my client, who's an iPhone user, and he sent me this screenshot:
Config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.swapco.swapco" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
<name>SwapCo</name>
<description>
SwapCo
</description>
<author email="support#phonegap.com" href="http://phonegap.com">
SwapCo
</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="10" />
<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.png" />
<icon gap:platform="android" gap:qualifier="mdpi" src="www/res/icon/android/icon.png" />
<icon gap:platform="android" gap:qualifier="hdpi" src="www/res/icon/android/icon.png" />
<icon gap:platform="android" gap:qualifier="xhdpi" src="www/res/icon/android/icon.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.png" width="57" />
<icon gap:platform="ios" height="72" src="www/res/icon/ios/icon.png" width="72" />
<icon gap:platform="ios" height="114" src="www/res/icon/ios/icon.png" width="114" />
<icon gap:platform="ios" height="144" src="www/res/icon/ios/icon.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="android" spec="^4.0.0" />
<engine name="ios" spec="^3.8.0" />
<feature name="Camera">
<param name="android-package" value="org.apache.cordova.camera.CameraLauncher" />
</feature>
<gap:config-file platform="android" parent="/manifest">
<application android:debuggable="true" />
</gap:config-file>
</widget>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>XXX</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class=" col-xs-4 col-xs-push-4 col-sm-4 col-sm-push-4 col-md-2 col-md-push-5">
<img src="images/logo.png" class="img-responsive center-block logo">
</div>
</div>
<div class="row">
<div class=" col-xs-12 col-sm-8 col-sm-push-2 col-md-4 col-md-push-4">
<br />
<h2 class="text-center white">Welcome!</h2>
<p class="text-center white">Selling made simple.</p>
<div class="input-area" style="margin-top:60px">
<input id="username" type="text">
<span class="icon"><i class="fa fa-user"></i> </span>
</div>
<div class="input-area">
<input id="password" type="password">
<span class="icon"><i class="fa fa-key"></i> </span>
</div>
</div>
<div class="bottom-buttons">
<button type="button" onclick="authenticate()" class="btn signin pull-left">SIGN IN</button>
<button type="button" class="btn signup pull-right">SIGN UP</button>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>
I've a Apple newbie, any comments are very welcome. By the way, I was using development certificates for the iOS build, and I've linked his iPhone to them.
For iOS make sure you are following ATS app transport policy for iOS 9+
If you want to access external URLs you can set your property to arbitraryloads true.
Example PhoneGap: modify config.xml to add properties to Info.plist ion iOS
Edit
Here are a few things that I've noticed:
Missing <script type="text/javascript" src="cordova.js"></script> in index.html
The version in <plugin name="cordova-plugin-whitelist" version="1" /> should be set to 1.0.0.
Also, I'm not sure how it's working on Android without this meta tag <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">. Find more info on Content-Security-Policy.
Without any code I cannot suggest anything but I found this question on Stack Overflow that seems like it might help you.
Seems like a URL issue.
Does it work in the iOS simulator?
The problem was in the certificates.
To fix it, I issued distribution (as opposed to development) certificate, two provisions (Ad Hoc for local testing and AppStore), and after that, it worked.
I created a project in phonegap for IOS and I want to open a ulr in my IOS browser but not inside my app. I tried to use inAppBrowser plugin but it seems it doesn't to working.
I only use .html, .css, .js files and the config.xml and I am on Windows and I build my project with online tool Adobe Phonegap builder
If I get it right, according to this link https: build.phonegap.com/plugins/658 there is no need to install the plugin you want to use, as some suggest with the command cordova plugin add.... You can have your job done by reffering the plugin inside the config.xml file. Am I right?
My config.xml file:
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns = " www.w3.org/ns/widgets"
xmlns:gap = " phonegap.com/ns/1.0"
id = "com.test.testingApp"
version = "1.0.0">
<name>test</name>
<!-- app icons and splashscreen -->
<icon src="icon.png" />
<gap:splash src="splash.png" />
<platform name="android">
<icon density="mdpi" src="res/android/icon-48-hdpi.png" />
<icon density="hdpi" src="res/android/icon-72-hdpi.png" />
<icon density="xhdpi" src="res/android/icon-96-hdpi.png" />
<icon density="xxhdpi" src="res/android/icon-144-hdpi.png" />
<gap:splash gap:density="mdpi" src="splash.png" width="320" height="470" />
<gap:splash gap:density="hdpi" src="splash.png" width="480" height="640" />
<gap:splash gap:density="xhdpi" src="splash.png" width="720" height="960" />
<gap:splash gap:density="xxhdpi" src="splash.png" />
</platform>
<platform name="ios">
<!-- 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" />
<!-- iOS 6.1 -->
<!-- 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" />
<!-- 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" />
<!-- 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" />
<!-- 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" />
</platform>
<preference name="phonegap-version" value="3.3.0" />
<!-- splashscreen delay -->
<preference name="SplashScreenDelay" value="5000" />
<access origin="*" browserOnly="true"/>
<!-- <content src=" mysite.com/myapp.html" /> for external pages -->
<content src="index.html" />
<preference name="loglevel" value="DEBUG" />
<!-- <preference name="orientation" value="portrait" /> -->
<preference name="loadUrlTimeoutValue" value="20000" />
<preference name="InAppBrowserStorageEnabled" value="true" />
<!--
<preference name="splashscreen" value="resourceName" />
<preference name="backgroundColor" value="0xFFF" />
<preference name="loadUrlTimeoutValue" value="20000" />
<preference name="InAppBrowserStorageEnabled" value="true" />
<preference name="disallowOverscroll" value="true" />
<preference name="keepRunning" value="false" />
-->
<feature name="App">
<param name="android-package" value="org.apache.cordova.App"/>
</feature>
<feature name="Geolocation">
<param name="android-package" value="org.apache.cordova.GeoBroker"/>
</feature>
<feature name="Device">
<param name="android-package" value="org.apache.cordova.Device"/>
</feature>
<!--
<feature name="Accelerometer">
<param name="android-package" value="org.apache.cordova.AccelListener"/>
</feature>
<feature name="Compass">
<param name="android-package" value="org.apache.cordova.CompassListener"/>
</feature>
<feature name="Media">
<param name="android-package" value="org.apache.cordova.AudioHandler"/>
</feature>
<feature name="Camera">
<param name="android-package" value="org.apache.cordova.CameraLauncher"/>
</feature>
<feature name="Contacts">
<param name="android-package" value="org.apache.cordova.ContactManager"/>
</feature>
<feature name="File">
<param name="android-package" value="org.apache.cordova.FileUtils"/>
</feature>
-->
<feature name="NetworkStatus">
<param name="android-package" value="org.apache.cordova.NetworkManager"/>
</feature>
<feature name="Notification">
<param name="android-package" value="org.apache.cordova.Notification"/>
</feature>
<!--
<feature name="Storage">
<param name="android-package" value="org.apache.cordova.Storage"/>
</feature>
<feature name="FileTransfer">
<param name="android-package" value="org.apache.cordova.FileTransfer"/>
</feature>
<feature name="Capture">
<param name="android-package" value="org.apache.cordova.Capture"/>
</feature>
<feature name="Battery">
<param name="android-package" value="org.apache.cordova.BatteryListener"/>
</feature>
-->
<feature name="SplashScreen">
<param name="android-package" value="org.apache.cordova.SplashScreen"/>
</feature>
<feature name="SplashScreen">
<param name="ios-package" value="CDVSplashScreen" />
</feature>
<!--
<feature name="Echo">
<param name="android-package" value="org.apache.cordova.Echo"/>
</feature>
<feature name="Globalization">
<param name="android-package" value="org.apache.cordova.Globalization"/>
</feature>
-->
<feature name="InAppBrowser">
<param name="android-package" value="org.apache.cordova.inappbrowser.InAppBrowser"/>
</feature>
<feature name="InAppBrowser">
<param name="ios-package" value="CDVInAppBrowser" />
</feature>
<!-- Deprecated plugins element. Remove in 3.0 -->
<plugins>
<gap:plugin name="org.apache.cordova.inappbrowser" version="0.3.3" />
</plugins>
</widget>
My index.html file is:
<html>
<head>
<meta charset="utf-8" />
<meta id="extViewportMeta" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<title>Hello World</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova_plugins.js"></script>
<link rel="stylesheet" href=" code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src=" code.jquery.com/jquery-1.10.2.min.js"></script>
<script src=" code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page">
<!-- MAIN BODY -->
<div data-role="content" role="main" style="padding-bottom:230px;">
<div class="main_header">
<br />
PlanTech
<br />
PlanTech
</div>
</div>
</div>
<div id="highlight"></div>
</body>
</html>
The problem is that both links open inside my app (and not in a separate browser as they supposed to). As a result, there is no chance to get back to my index.html page after one of the links is clicked without ending the app and restarting it.
I would appreciate it if someone could help me go through this, because I searched several times the internet and I am stuck.
Thanks in advance everyone for your time.
I have a solution for this ... there is no chance to get back to my index.html page after one of the links clicked
If you go through complete documentation,
1 - Return the window object like
var ref = window.open ('www.google.com', '_blank', 'location=yes');
2 - Add an event listener for exit event.
ref.addEventListener(exit, myexitcallback);
3 - close method will close the browser window. So, in your function call back :
function myexitcallback{
ref.close();
}
Hope this will solve your problem.
Good luck.
Finally, I found the solution to my question myself. As usual it was in front of my eyes, but I would find it not in a thousand years if I wasn't lucky enough to see it.
As the config.xml itself suggests: <!-- Deprecated plugins element. Remove in 3.0 -->
So I had to change the following code
<plugins>
<gap:plugin name="org.apache.cordova.inappbrowser" version="0.3.3" />
</plugins>
with THIS:
<gap:plugin name="org.apache.cordova.inappbrowser" version="0.3.3" />
I'm trying to make iOS apps using phonegap, but when I finish upload to the apple store, all going well I just got an email notification with error :
Version Mismatch - Neither CFBundleVersion ['2.0.0'] nor CFBundleShortVersionString [''] in the Info.plist match the version of the app set in iTunes Connect ['2.0'].
What causes this error? Is there anything wrong in the config.xml settings in phonegap?
My config.xml :
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.joriscorp.xxxx" version="2.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
<name>Baca Berita</name>
<description>
Aplikasi android untuk mendapatkan informasi terkini dari situs www.bacaberita.com.
</description>
<author email="bertho_joris#yahoo.co.id" href="http://www.berthojoris.com/">
Bertho Joris
</author>
<feature name="http://api.phonegap.com/1.0/device" />
<preference name="phonegap-version" value="3.3.0" />
<preference name="permissions" value="none" />
<preference name="orientation" value="portrait" />
<preference name="target-device" value="universal" />
<preference name="fullscreen" value="false" />
<preference name="webviewbounce" value="true" />
<preference name="prerendered-icon" value="true" />
<preference name="stay-in-webview" value="false" />
<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="ios-statusbarstyle" value="black-opaque" />
<icon src="icon.png" />
<icon src="icons/ios/icon.png" gap:platform="ios" width="57" height="57" />
<icon src="icons/ios/icon-72.png" gap:platform="ios" width="72" height="72" />
<icon src="icons/ios/icon_at_2x.png" gap:platform="ios" width="114" height="114" />
<icon src="icons/ios/icon-72_at_2x.png" gap:platform="ios" width="144" height="144" />
<gap:splash src="splash/ios/Default.png" gap:platform="ios" width="320" height="480" />
<gap:splash src="splash/ios/Default_at_2x.png" gap:platform="ios" width="640" height="960" />
<gap:splash src="splash/ios/Default_iphone5.png" gap:platform="ios" width="640" height="1136" />
<gap:splash src="splash/ios/Default-Landscape.png" gap:platform="ios" width="1024" height="748" />
<gap:splash src="splash/ios/Default-Portrait.png" gap:platform="ios" width="768" height="1004" />
<gap:splash src="splash/ios/Default-Landscape_at_2x.png" gap:platform="ios" width="2048" height="1496" />
<gap:splash src="splash/ios/Default-Portrait_at_2x.png" gap:platform="ios" width="1536" height="2008" />
<access origin="*" />
</widget>
What should I do to handle this error?
Thanks....
According to the email, it seems as if you need to change your Version number in the General section of your Target from "2.0.0" to "2.0" and your Bundle version string in your Info.plist from " " to "2.0" since "2.0" is the version listed in iTunes Connect.
This line, for example, should be:
<widget id="com.joriscorp.xxxx" version="2.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">