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.
Related
I upgraded a working Phonegap App from CLI version 6.1.0 to 6.5.0 according to new guidelines of Adobe build cloud service as of December 1st 2018.
Since I upgraded to CLI Version 6.5.0, I am experiencing a new bug with the iOS Version of my app. Right after app start, the activity animation remains visible instead of loading the login page of the app. With version 6.1.0 the user would be exposed to the location permission pop up window, which is not showing up with CLI 6.5.0. Instead, upon clicking the home button on the iPhone, I get to see the permission pop up outside the app. Irrespective of what I choose inside the pop-up, when returning to the app, the login screen will then be fully loaded.
This is my current config.xml. I basically just changed the phone gap-version entry from „cli-6.1.0“ to „cli-6.5.0“.
<?xml version='1.0' encoding='utf-8'?>
<widget xmlns="http://www.w3.org/ns/widgets"
xmlns:gap="http://phonegap.com/ns/1.0"
xmlns:android="http://schemas.android.com/apk/res/android"
id=„foo“
version=„1.1“ versionCode="90">
<gap:config-file platform="ios" parent="CFBundleShortVersionString">
<string>1.1</string>
</gap:config-file>
<name>foo</name>
<description>
foo
</description>
<author email=„foo“ href=„foo“>
foo
</author>
<gap:platform name="ios" />
<gap:platform name="android" />
<preference name="permissions" value="none" />
<preference name="phonegap-version" value="cli-6.5.0" />
<preference name="orientation" value="portrait" />
<preference name="fullscreen" value="false" />
<preference name="target-device" value="handset" />
<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="false" />
<preference name="show-splash-screen-spinner" value="false" />
<preference name="auto-hide-splash-screen" value="false" />
<preference name="disable-cursor" value="false" />
<preference name="android-minSdkVersion" value="15" />
<preference name="android-installLocation" value="auto" />
<preference name="EnableViewportScale" value="true" />
<preference name="KeyboardDisplayRequiresUserAction" value="false" />
<preference name="HideKeyboardFormAccessoryBar" value="false" />
<preference name="SuppressesIncrementalRendering" value="false" />
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#000000" />
<preference name="KeepRunning" value="true"/>
<gap:config-file platform="android" parent="/manifest/application">
<activity android:launchMode="singleTask" />
</gap:config-file>
<gap:config-file platform="ios" parent="UIBackgroundModes" overwrite="true">
<array>
<string>location</string>
</array>
</gap:config-file>
<gap:config-file platform="ios" parent="LSApplicationQueriesSchemes" overwrite="true">
<array>
<string>comgooglemaps</string>
<string>tomtomhome</string>
<string>navigon</string>
</array>
</gap:config-file>
<gap:config-file platform="ios" parent="NSLocationAlwaysUsageDescription">
<string>foo</string>
</gap:config-file>
<gap:config-file platform="ios" parent="NSLocationWhenInUseUsageDescription">
<string>foo</string>
</gap:config-file>
<gap:config-file platform="ios" parent="NSMotionUsageDescription">
<string>foo</string>
</gap:config-file>
<gap:config-file platform="ios" parent="NSPhotoLibraryUsageDescription">
<string>foo</string>
</gap:config-file>
<icon src="icon.png" />
<icon gap:density="ldpi" gap:platform="android" src="res/icons/android/ldpi.png" />
<icon gap:density="mdpi" gap:platform="android" src="res/icons/android/mdpi.png" />
<icon gap:density="hdpi" gap:platform="android" src="res/icons/android/hdpi.png" />
<icon gap:density="xhdpi" gap:platform="android" src="res/icons/android/xhdpi.png" />
<icon gap:platform="ios" height="40" src="res/icons/ios/icon-40.png" width="40" />
<icon gap:platform="ios" height="80" src="res/icons/ios/icon-40#2x.png" width="80" />
<icon gap:platform="ios" height="1024" src="res/icons/ios/icon.png" width="1024" />
<icon gap:platform="ios" height="57" src="res/icons/ios/icon_57_57.png" width="57" />
<icon gap:platform="ios" height="58" src="res/icons/ios/icon_58_58.png" width="58" />
<icon gap:platform="ios" height="87" src="res/icons/ios/icon_87_87.png" width="87" />
<icon gap:platform="ios" height="114" src="res/icons/ios/icon_at_2x.png" width="114" />
<icon gap:platform="ios" height="120" src="res/icons/ios/icon-40#3x.png" width="120" />
<gap:splash src="splash.png" />
<gap:splash gap:platform="android" src="res/splash/android/ldpi.png" gap:density="ldpi" />
<gap:splash gap:platform="android" src="res/splash/android/mdpi.png" gap:density="mdpi" />
<gap:splash gap:platform="android" src="res/splash/android/hdpi.png" gap:density="hdpi" />
<gap:splash gap:platform="android" src="res/splash/android/xhdpi.png" gap:density="xhdpi" />
<platform name="ios">
<splash src="res/splash/ios/Default.png" width="320" height="480" />
<splash src="res/splash/ios/Default_at_2x.png" width="640" height="960" />
<splash src="res/splash/ios/Default_iphone5.png" width="640" height="1136" />
<splash src="res/splash/ios/Default_iphone6.png" width="750" height="1334" />
<splash src="res/splash/ios/Default_iphone6_at3x.png" width="1242" height="2208" />
</platform>
<gap:splash gap:platform="ios" src="res/splash/ios/Default.png" width="320" height="480" />
<gap:splash gap:platform="ios" src="res/splash/ios/Default_at_2x.png" width="640" height="960" />
<gap:splash gap:platform="ios" src="res/splash/ios/Default_iphone5.png" width="640" height="1136" />
<gap:splash gap:platform="ios" src="res/splash/ios/Default_iphone6.png" width="750" height="1334" />
<gap:splash gap:platform="ios" src="res/splash/ios/Default_iphone6_at3x.png" width="1242" height="2208" />
<access origin="*" />
<allow-navigation href="*" />
<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>
<preference name="android-build-tool" value="gradle" />
<plugin source="npm" name="cordova-plugin-camera" spec="2.2.0" />
<plugin source="npm" name="cordova-plugin-whitelist" spec="1.2.1" />
<plugin source="npm" name="cordova-plugin-device" spec="1.1.1" />
<plugin source="npm" name="cordova-plugin-file" spec="3.0.0" />
<plugin source="npm" name="cordova-plugin-file-transfer" spec="1.3.0" />
<plugin source="npm" name="cordova-plugin-network-information" spec="1.0.1" />
<plugin source="npm" name="cordova-plugin-splashscreen" spec="2.1.0" />
<plugin source="npm" name="cordova-plugin-statusbar" spec="2.1.1" />
<plugin source="npm" name="cordova-plugin-geolocation" spec="2.1.0" />
<plugin name="https://github.com/ohh2ahh/AppAvailability.git#v0.3.1" />
<plugin name="https://github.com/interFace-dk/phonegap-googlenavigate.git" />
<plugin name="https://github.com/kdileep1990/com.dileep.plugins.datepicker.git#0.0.1" />
<plugin name="https://github.com/cmackay/google-analytics-plugin.git#v1.0.2" />
<preference name="cordova-background-geolocation-license" value=„123“ />
<plugin name="background-geolocation" spec="1.7.3" source="pgb" />
<plugin name="https://github.com/katzer/cordova-plugin-app-event.git#1.2.0" />
<plugin name="https://github.com/cliqueApp/cordova-plugin-local-notifications.git#master" />
<plugin source="npm" name="phonegap-plugin-push" spec="1.7.2">
<param name="SENDER_ID" value=„123“ />
</plugin>
</widget>
I suspect, there is something wrong with the way I am calling the NSLocation with the new CLI Version.
Any other vital changes arising from the version change to 6.5.0? Any hints would be highly appreciated.
I found a solution to my problem here. Long story short, this is how I solved this issue:
- config.xml (changed the version number, I used an older one):
<plugin name="cordova-plugin-geolocation" spec="2.4.3" />
index.html (added this line):
<meta http-equiv="Content-Security-Policy" content="frame-src * gap://ready; default-src 'self' gap://ready file://* *; connect-src * blob: data:; style-src * 'unsafe-inline'; script-src * 'unsafe-eval' 'unsafe-inline'; img-src data: *" />
have fun.
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>
After I upgraded to Phonegap 5 I can't create a working plugin for old or new projects.
There are many such questions but most relate to version 3 that worked fine for me. Can't find good docs related to version 5.
I created I new test project, like that and still I can't make it working.
phonegap create test01 com.example.test01 Test01
phonegap platform add ios
phonegap plugin add ../test01-plugin01/
phonegap build ios
plugin.xml
<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://www.phonegap.com/ns/plugins/1.0"
id="com.example.plugin01"
version="1.0.0">
<name>Plugin01</name>
<!-- ios -->
<platform name="ios">
<header-file src="src/ios/Plugin01.h" />
<source-file src="src/ios/Plugin01.m" />
</platform>
</plugin>
Plugin01.h
#import <Foundation/Foundation.h>
#import <Cordova/CDVPlugin.h>
#interface Plugin01 : CDVPlugin {
NSString* callbackID;
}
#property (nonatomic, copy) NSString* callbackID;
- (void)test:(CDVInvokedUrlCommand*)command;
#end
config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.example.test01" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
<name>Test01</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="7" />
<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" />
<gap:plugin name="com.example.plugin01" />
<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" />
<plugin name="com.example.plugin01" />
<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
<button onclick="test01();">Test</button>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
function test01(){
cordova.exec(null, null, 'Plugin01', 'test', []);
}
</script>
I can see Plugin01.h and Plugin01.m in Xcode when I open project in Plugin folder. I can run app on iPhone.
When I touch "test" button then I get following error:
2015-07-20 12:00:29.108 Test01[1925:1174928] ERROR: Plugin 'Plugin01' not found, or is not a CDVPlugin. Check your plugin mapping in config.xml.
2015-07-20 12:00:29.109 Test01[1925:1174928] -[CDVCommandQueue executePending] [Line 159] FAILED pluginJSON = ["INVALID","Plugin01","test",[]]
I can't execute my native code from WebView
You have to add the feature tag inside a config-file tag in the plugin.xml so it's added to the config.xml
<name>Plugin01</name>
<!-- ios -->
<platform name="ios">
<config-file target="config.xml" parent="/*">
<feature name="Plugin01">
<param name="ios-package" value="Plugin01"/>
</feature>
</config-file>
<header-file src="src/ios/Plugin01.h" />
<source-file src="src/ios/Plugin01.m" />
</platform>
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);
}