Phonegap 3.1 on iOS hide splash screen manually - javascript

I have the following in my config.xml file:
<preference name="splashscreen" value="splash" />
<preference name="SplashScreenDelay" value="10000" />
<preference name="auto-hide-splash-screen" value="false" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="FadeSplashScreen" value="true" />
<preference name="fade-splash-screen-duration" value="5000" />
<preference name="splash-screen-duration" value="5000" />
<gap:plugin name="org.apache.cordova.splashscreen" />
<feature name="SplashScreen">
<param name="ios-package" value="CDVSplashScreen"/>
<param name="onload" value="true" />
</feature>
and on initializing my app I have the following:
setTimeout(function() {
navigator.splashscreen.hide();
}, 2500);
I've also installed the splash screen plugin using the instructions found here
despite this the splash screen is not delayed and instead a white screen flashes before my app loads. Any help appreciated!

Are you running the app in debug with xcode? Are there any messages output?
I've had this issue before and got a warning saying "The splashscreen image named Default-Portrait was not found"
My splash screen was named something else, so I created another called "Default-Portrait" and added it to the project.
Same goes for the #2x version.

Related

how to use (inAppBrowser) plugin in phonegap project?

i install "inAppBrowser" plugin in my phonegap project by this command line:
cordova plugin add cordova-plugin-inappbrowser
and in the index.html blow code in writen:
<a id="eghdamat_ghabl" href="#" onclick="window.open('http://apache.org', '_blank', 'location=yes'); return false;">click me</a>
but it does't open the link.
config.xml:
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.example.hello" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>HelloWorld</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">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<plugin name="cordova-plugin-inappbrowser" spec="^3.0.0" />
<icon src="icon.png" />
<splash src="splash.png" />
</widget>
You have to add this line on the config.xml to allow navigation to external urls
<allow-navigation href="*" />
This will allow navigation to any external url.
If you just want to allow the navigation to apache then add this line
<allow-navigation href="https://apache.org" />

iOS native app build with phonegap opens in lower resolution

When I open my application in the browser of my iPad Pro 12.9in while serving it with the PhoneGap app on my desktop, it opens as it should. But when I install the application and open it, it opens with a lower resolution. I saw this could be because of lower resolutions spash screens but I designed a new splashscreen with resolution 2732x2048 for the iPad pro.
Should I maybe change something in the config.xml file? I have tried a lot but still haven't found a solution.
These are the imported splash images for iOS with their resolutions
This is how the app looks when installed (1)
This is how the app looks when installed (2)
This is how the app should look - like it is now in the browser (1)
This is how the app should look - like it is now in the browser (2)
Have you added your new Splashscreen to your config.xml?
You need the following entries in that file:
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
<splash src="<your path>/Default#2x~universal~anyany.png" />
<splash src="<your path>/Default#2x~universal~comany.png" />
<splash src="<your path>/Default#2x~universal~comcom.png" />
<splash src="<your path>/Default#3x~universal~anyany.png" />
<splash src="<your path>/Default#3x~universal~anycom.png" />
<splash src="<your path>/Default#3x~universal~comany.png" />
</platform>
In my case path is <project>/res/ios
For using these, you need at least CLI 7.0.1 or 7.1.0 to target iOS Phonegap Version 4.4.0
Additional information:
https://medium.com/#photokandy/phonegap-build-supports-ios-launch-storyboards-44a4180bfafe
https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/
https://forums.adobe.com/thread/2251428

Weinre - Not able to detect my mobile in Target

I'm trying to run weinre on my laptop IP (Say 130.x.x.x) and both the mobile and laptop are in the same WiFi network. I have added the script file URL in the index.html of my ionic project. When i try to open the weinre or target-script-min.js file on my mobile browser(chrome app), I'm able to view the same (No issues with firewall). However, if I try to run my application, I get
"Failed to load resource:
http://130.x.x.x:8080/target/target-script-min.js#anonymous
resource: the server responded with a status of 404 (Not Found)"
I have googled around and found problems related to cordova-whitelist plugin. I have verified and by default I have allowed all IP
<content src="index.html"/>
<access origin="*"/>
<allow-navigation href="http://130.x.x.x/*" />
<preference name="webviewbounce" value="false"/>
<preference name="UIWebViewBounce" value="false"/>
<preference name="DisallowOverscroll" value="true"/>
<preference name="SplashScreenDelay" value="2000"/>
<preference name="FadeSplashScreenDuration" value="2000"/>
<preference name="android-minSdkVersion" value="16"/>
<preference name="BackupWebStorage" value="none"/>
<preference name="SplashScreen" value="screen"/>
I still cant find the exact reason why I'm not able to download the .js in my app. Any idea on what could be wrong.

whitelisting a domain in ionic app

I am going through the ionic tutorial present in
http://ccoenraets.github.io/ionic-tutorial/build-ionic-project.html
and ran the app on browser
ionic serve
and in android using
ionic emulate android
When I run the app as instructed in tutorial, it works well on my chrome browser but when I try to run on emulator, I dont see any data, its just empty screens with menus. I suspect its the problem with whilelist and added
<allow-navigation href="*" />
to my /config.xml file but it still doesn't work, My current config.xml file is
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ionicframework.conference472350" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>conference</name>
<description>
An Ionic Framework and Cordova project.
</description>
<author email="hi#ionicframework" href="http://ionicframework.com/">
Ionic Framework Team
</author>
<content src="index.html"/>
<access origin="*" />
<allow-intent href="*" />
<allow-navigation href="*" />
<preference name="webviewbounce" value="false"/>
<preference name="UIWebViewBounce" value="false"/>
<preference name="DisallowOverscroll" value="true"/>
<preference name="android-minSdkVersion" value="16"/>
<preference name="BackupWebStorage" value="none"/>
<preference name="SplashScreen" value="screen"/>
<preference name="SplashScreenDelay" value="3000"/>
<feature name="StatusBar">
<param name="ios-package" value="CDVStatusBar" onload="true"/>
</feature>
<platform name="android">
<icon src="resources/android/icon/drawable-ldpi-icon.png" density="ldpi"/>
<icon src="resources/android/icon/drawable-mdpi-icon.png" density="mdpi"/>
<icon src="resources/android/icon/drawable-hdpi-icon.png" density="hdpi"/>
<icon src="resources/android/icon/drawable-xhdpi-icon.png" density="xhdpi"/>
<icon src="resources/android/icon/drawable-xxhdpi-icon.png" density="xxhdpi"/>
<icon src="resources/android/icon/drawable-xxxhdpi-icon.png" density="xxxhdpi"/>
<splash src="resources/android/splash/drawable-land-ldpi-screen.png" density="land-ldpi"/>
<splash src="resources/android/splash/drawable-land-mdpi-screen.png" density="land-mdpi"/>
<splash src="resources/android/splash/drawable-land-hdpi-screen.png" density="land-hdpi"/>
<splash src="resources/android/splash/drawable-land-xhdpi-screen.png" density="land-xhdpi"/>
<splash src="resources/android/splash/drawable-land-xxhdpi-screen.png" density="land-xxhdpi"/>
<splash src="resources/android/splash/drawable-land-xxxhdpi-screen.png" density="land-xxxhdpi"/>
<splash src="resources/android/splash/drawable-port-ldpi-screen.png" density="port-ldpi"/>
<splash src="resources/android/splash/drawable-port-mdpi-screen.png" density="port-mdpi"/>
<splash src="resources/android/splash/drawable-port-hdpi-screen.png" density="port-hdpi"/>
<splash src="resources/android/splash/drawable-port-xhdpi-screen.png" density="port-xhdpi"/>
<splash src="resources/android/splash/drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/>
<splash src="resources/android/splash/drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/>
</platform>
</widget>
I am debugging the app in chrome devtools and this is the error I get in console for the app
Failed to load resource: net::ERR_CONNECTION_REFUSED
Interestingly enough, I had the same issue while developing my app.
Have you installed the plugin correctly? You didn't mention if you did.
You need to install the cordova whitelist plugin first. I did this via npm.
I also added all access to resources in my config.xml:
<access origin="*" />
<allow-intent href="*" />
<allow-navigation href="*" />
Though, that is not recommended. Rather, allow access to the resources you need for the app.

Phonegap - configuring the config.xml file to enable the camera

I am trying to create an app that makes use of the camera on the device. When I run the app on my Android phone, I can get it to work no problem. However, when I package it using the Phonegap builder, I can't seem to get the camera to open.
My guess is it's a problem with the config.xml file. This is what mine looks like:
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.test.testApp"
version = "1.0.0">
<name>Test App</name>
<description>
Test Description
</description>
<author href="http://mysite.com"
email="geoff#email.com">
Geoff Baum
</author>
<gap:platforms>
<gap:platform name="android" minVersion="2.1" />
<gap:platform name="webos" />
<gap:platform name="symbian.wrt" />
<gap:platform name="blackberry" project="widgets"/>
</gap:platforms>
<icon src="icon.png" gap:role="default" />
<!--<gap:splash src="weirdo.png" />-->
<feature name="http://api.phonegap.com/1.0/geolocation"/>
<feature name="http://api.phonegap.com/1.0/network"/>
<feature name="http://api.phonegap.com/1.0/geolocation"/>
<feature name="http://api.phonegap.com/1.0/file"/>
<feature name="http://api.phonegap.com/1.0/camera"/>
<feature name="http://api.phonegap.com/1.0/media"/>
<feature name="http://api.phonegap.com/1.0/device"/>
<!--<preference name="orientation" value="default" />-->
<!--<preference name="android-minSdkVersion" value="7" /> -->
</widget>
Does that look correct? I have this file at the root level of the folder I am packaging and sending to Phonegap. Is this the proper approach? I am not sure what else I can do. Any help would be greatly appreciated. Thanks!
UPDATE:
So I tried including the Android specific JS file cordova-1.7.0.js and everything worked. So it looks like the Phonegap build is not adding the necessary files. Does anyone know anything about that? Thanks.
Any reason why you have
<feature name="http://api.phonegap.com/1.0/geolocation"/>
twice?
So the solution lay in the include files. I was still including the phonegap.js file, and it was breaking the build process. I removed the various references to that file and it fixed it.

Categories