How to remove white screen in ionic application - authentication

I have created an ionic application and when I load my application after splash screen and before login page a white flicker comes for about 3-4 seconds. But I want to remove it in my application .So please suggest how to do it.
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />

first you have to add below preference in config.xml file
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="FadeSplashScreen" value="true" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="ShowSplashScreen" value="true" />
then use this "cordova-plugin-splashscreen" and check this link to add this plugin
splash screen cordova plugin
and in app.component.ts in intializeApp folder or in custructor put this code
this.platform.ready().then(() => {
this.splashScreen.hide();
});
and make sure when you make production build then use ionic cordova build android --prod.
I hope this will help you.

Related

connection error when creating app using cordova

I was try to create android app using vuejs and cordova. A connection error shown while opening app.
my .env
VUE_APP_URL='https://myapp.com'
cordova/config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.mealclub.app" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>UkMeals</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>
<!-- this hook will point your config.xml to the DevServer on Serve -->
<hook type="after_prepare" src="../node_modules/vue-cli-plugin-cordova/serve-config-hook.js" />
<content src="index.html" />
<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>
</widget>
Error image

Images not found in Cordova app from Vue project

Recently I have installed cordova into a VueJS project and almost everything works fine, but statics files are not found like images and I didnt figure out why.
I read something about relative paths like ../../assets and I tried to change to assets/ just to see if works but didnt.
Using scss, images are normally imported with require(../../assets so I tried to change all my img src to :src="require(../../assets)" but still have no success.
I never had to install cordova in a running project, so I didnt know if I'm missing some config.
Here is my src-cordova/config.js
<?xml version='1.0' encoding='utf-8'?>
<widget id="medcof.app.io" version="1.0.0" xmlns:android="http://schemas.android.com/apk/res/android" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>MedCofQBank</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>
<!-- this hook will point your config.xml to the DevServer on Serve -->
<hook type="after_prepare" src="../node_modules/vue-cli-plugin-cordova/serve-config-hook.js" />
<!-- this hook will point your config.xml to the DevServer on Serve -->
<hook type="after_prepare" src="../node_modules/vue-cli-plugin-cordova/serve-config-hook.js" />
<content src="index.html" />
<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">
<edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">
<application android:usesCleartextTraffic="true" />
</edit-config>
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<preference name="AndroidPersistentFileLocation" value="Compatibility" />
</widget>

i am getting while running on my mobile. But it is running fine on ionic serve

Getting ERR_CLEARTEXT_NOT_PERMITTED error. I have tried every thing change my config.xml , network_config getting update automatically when i add my domain. ionic cli is 5.4.13
<?xml version='1.0' encoding='utf-8'?>
<widget id="io.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>MyApp</name>
<description>An awesome Ionic/Cordova app.</description>
<author email="hi#ionicframework.com" href="http://ionicframework.com/">Ionic Framework Team</author>
<content src="index.html" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<preference name="ScrollEnabled" value="false" />
<preference name="android-minSdkVersion" value="19" />
<preference name="BackupWebStorage" value="none" />
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />
<platform name="android">
<access origin="*" />
<preference name="android-usesCleartextTraffic" value="true" />
<allow-navigation href="*" />
<edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
<application android:networkSecurityConfig="#xml/network_security_config" />
<application android:usesCleartextTraffic="true" />
</edit-config>
<resource-file src="resources/android/xml/network_security_config.xml" target="app/src/main/res/xml/network_security_config.xml" />
<allow-intent href="market:*" />
</platform>
</widget>
You can use ionic cordova http plugin for network request your error maybe solve.
Here is link for that
https://ionicframework.com/docs/native/http

How to add SceneBuilder to Intellij after mistakenly adding the SceneBuilder's shortcut link

So I installed Intellij for the first time and I mistakenly linked SceneBuilder's shortcut link to the FXML file and keep getting this error: IntelliJ failed to start scene builder. After doing a lot of searching, I could not find out how to reset SceneBuilder. How do I reset SceneBuilder in IntelliJ?
Go to Settings > Languages & Frameworks > JavaFX > Path to SceneBuilder and select directory of JavaFX Scene Builder 2.0.exe
I had to follow this instruction to find the files I needed to edit. -> Instructions
I use Windows 10 so I used <SYSTEM DRIVE>\Users\<USER ACCOUNT NAME>\.<PRODUCT><VERSION>. My path looks like C:\Users\yourUserName\.IdeaIC2017.3\config. Next, I searched for "scenebulder". The results lead me to a file named "options" and a file named "other".
other.xml
<application>
<component name="JavaFxSettings">
<!-- change here --><option name="pathToSceneBuilder" value="$USER_HOME$/AppData/Roaming/Microsoft/Windows/Start Menu/Programs/Gluon/SceneBuilder.lnk" />
<!-- change here --><option name="myPathToSceneBuilder" value="$USER_HOME$/AppData/Roaming/Microsoft/Windows/Start Menu/Programs/Gluon/SceneBuilder.lnk" />
</component>
</application>
options.xml
<application>
<component name="PropertiesComponent">
<property name="Default.savedEditorTheme" value="_#user_Default" />
<property name="installed.kotlin.plugin.version" value="1.2.10-release-IJ2017.3-1" />
<property name="project.wizard.group" value="JavaFX Application" />
<property name="project.wizard.template" value="JavaFX Application" />
<!-- change here --><property name="file.chooser.recent.files" value="$USER_HOME$/AppData/Roaming/Microsoft/Windows/Start Menu/Programs/Gluon/SceneBuilder.lnk
C:/Program Files/Java/jdk1.8.0_141" />
<property name="jdk.selected.JAVA_MODULE" value="1.8" />
<property name="file.gist.reindex.count" value="641" />
<property name="lastTip" value="3" />
<property name="settings.code.style.selected.tab.JAVA" value="Tabs and Indents" />
<property name="FileTemplates.SelectedTemplate" value="HTML File" />
</component>
</application>
I found where my SceneBuilder exe is located and changed the path in both files.
other.xml
<application>
<component name="JavaFxSettings">
<!-- change here --><option name="pathToSceneBuilder" value="$USER_HOME$/AppData/Local/SceneBuilder/SceneBuilder.exe" />
<!-- change here --><option name="myPathToSceneBuilder" value="$USER_HOME$/AppData/Local/SceneBuilder/SceneBuilder.exe" />
</component>
</application>
options.xml
<application>
<component name="PropertiesComponent">
<property name="Default.savedEditorTheme" value="_#user_Default" />
<property name="installed.kotlin.plugin.version" value="1.2.10-release-IJ2017.3-1" />
<property name="project.wizard.group" value="JavaFX Application" />
<property name="project.wizard.template" value="JavaFX Application" />
<!-- change here --><property name="file.chooser.recent.files" value="$USER_HOME$/AppData/Local/SceneBuilder/SceneBuilder.exe
C:/Program Files/Java/jdk1.8.0_141" />
<property name="jdk.selected.JAVA_MODULE" value="1.8" />
<property name="file.gist.reindex.count" value="641" />
<property name="lastTip" value="3" />
<property name="settings.code.style.selected.tab.JAVA" value="Tabs and Indents" />
<property name="FileTemplates.SelectedTemplate" value="HTML File" />
</component>
</application>
Finally, I restarted IntelliJ and right clicked on the FXML file and selected "Open in SceneBuilder" and it worked.
follow the below step
Download and install scenebuilder(download same version of scene builder as your Java in your machine for eg if you have Java 8 on your local then download Scene builder version 8)
1.Open intellij -> Navigate to file -> Setting -> Type JavaFx
Set the location of scenebuilder in your local machine to the path as shown below
C:\Users\userid\AppData\Local\SceneBuilder\SceneBuilder.exe
Click apply and OK.
Now try to access scene builder from your .fxml file

Phonegap Build InAppBrowser

It is necessary to add any specific setting in config.xml to have inAppBrowser working with phonegap build?
Im just adding:
var ref = window.open(url, '_blank');
or
var ref = window.open(url, 'blank');
but it doesnt work.
My 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 = "com.phonegap.myapp">
<name>My app</name>
<description>test</description>
<preference name="phonegap-version" value="2.7.0" />
<access origin="*" />
<preference name="fullscreen" value="false" />
</widget>
I do this which will open the in-app browser:
window.open(destination, '_blank', 'location=yes,enableViewportScale=yes');
In your config.xml you should have a lot more than what you have there. This is mine:
<?xml version="1.0" encoding="UTF-8"?>
<widget>
<preference name="AllowInlineMediaPlayback" value="false" />
<preference name="AutoHideSplashScreen" value="true" />
<preference name="BackupWebStorage" value="cloud" />
<preference name="DisallowOverscroll" value="false" />
<preference name="EnableLocation" value="false" /><!-- DEPRECATED -->
<preference name="EnableViewportScale" value="false" />
<preference name="FadeSplashScreen" value="true" />
<preference name="FadeSplashScreenDuration" value=".25" />
<preference name="HideKeyboardFormAccessoryBar" value="false" />
<preference name="KeyboardDisplayRequiresUserAction" value="true" />
<preference name="KeyboardShrinksView" value="false" />
<preference name="MediaPlaybackRequiresUserAction" value="false" />
<preference name="ShowSplashScreenSpinner" value="true" />
<preference name="SuppressesIncrementalRendering" value="false" />
<preference name="TopActivityIndicator" value="gray" />
<content src="index.html" />
<plugins>
<plugin name="Device" value="CDVDevice" />
<plugin name="Logger" value="CDVLogger" />
<plugin name="Compass" value="CDVLocation" />
<plugin name="Accelerometer" value="CDVAccelerometer" />
<plugin name="Camera" value="CDVCamera" />
<plugin name="NetworkStatus" value="CDVConnection" />
<plugin name="Contacts" value="CDVContacts" />
<plugin name="Debug Console" value="CDVDebugConsole" />
<plugin name="Echo" value="CDVEcho" />
<plugin name="File" value="CDVFile" />
<plugin name="FileTransfer" value="CDVFileTransfer" />
<plugin name="Geolocation" value="CDVLocation" />
<plugin name="Notification" value="CDVNotification" />
<plugin name="Media" value="CDVSound" />
<plugin name="Capture" value="CDVCapture" />
<plugin name="SplashScreen" value="CDVSplashScreen" />
<plugin name="Battery" value="CDVBattery" />
<plugin name="Globalization" value="CDVGlobalization" />
<plugin name="InAppBrowser" value="CDVInAppBrowser" />
</plugins>
<access origin="*" />
</widget>
Yours might be smaller if you don't use all of the features of PhoneGap. You'll definitely need that InAppBrowser plugin however!