webpage not showing up on android apk - android

I'm using phonegap to basically let me make a web page that seems like an app, and the page fine in the native browser on android, works fine in the emulator, but when it comes to the app (which is the same resolution as the emulator) there is simply a white blank page..
Any ideas?
I've installed the apk before and uninstalled it.. might it have something to do with this?

Make sure that your Activity does not have the:
setContentView(R.layout.activity_main);
Perhaps, your layout is empty and that line still exists together with the:
super.loadUrl("file:///android_asset/www/dummy.html");
You can also include a config.xml file in your /res/xml folder (/res/xml/config.xml)
Here is a sample of a basic one:
<?xml version="1.0" encoding="utf-8"?>
<cordova>
<access origin="http://127.0.0.1*"/> <!-- allow local pages -->
<log level="DEBUG"/>
<preference name="useBrowserHistory" value="true" />
<preference name="exit-on-suspend" value="false" />
<plugins>
<plugin name="App" value="org.apache.cordova.App"/>
<plugin name="InAppBrowser" value="org.apache.cordova.InAppBrowser"/>
</plugins>
</cordova>
I've had similar trouble when I first started experimenting with phonegap.
Also, make sure that the cordova-2.2..jar is in your libs folder and it is also referenced in your build path.
Hope that helps.

Related

cordova-plugin-ionic-webview - custom scheme not working on Android

I am developing (and near to the release) of a Cordova App for iOS and Android.
I am trying to use cordova-plugin-ionic-webview in order to use the latest WebView engines.
I am able to use this plugin on iOS but on Android the App crashes on launch.
MY CONFIG.XML:
<allow-navigation href="cordovaios://*" />
<allow-navigation href="cordovaandroid://*" />
<plugin name="cordova-plugin-ionic-webview" spec="^4.0.0">
<variable name="ANDROID_SUPPORT_ANNOTATIONS_VERSION" value="27.+" />
</plugin>
<preference name="Hostname" value="my-backend-url-to-avoid-CORS.com" />
<preference name="iosScheme" value="cordovaios" />
<preference name="Scheme" value="cordovaandroid" />
<preference name="ScrollEnabled" value="true" />
<preference name="MixedContentMode" value="0" />
<preference name="AllowBackForwardNavigationGestures" value="true" />
<preference name="Allow3DTouchLinkPreview" value="false" />
<preference name="WKSuspendInBackground" value="false" />
<preference name="KeyboardAppearanceDark" value="false" />
LOGS:
5726-5770/mycertificate.enterprise D/SERVER: Handling local request: cordovaandroid://my-backend-url-to-avoid-CORS.com/static/js/10.601e7973.chunk.js
5726-5773/mycertificate.enterprise E/chromium: [ERROR:render_process_host_impl.cc(4070)] Terminating render process for bad Mojo message: Received bad user message: Origin is invalid
5726-5773/mycertificate.enterprise E/chromium: [ERROR:bad_message.cc(23)] Terminating renderer for bad IPC message, reason 123
NOTE:
This config works fine on iOS. On Android I can't use this plugin due to this Hostname/Origin issue.
That custom scheme does not appear to be supported (just try to find something alike that in the source code). It is also beyond my understanding, for what one even would even need to register a custom protocol handler, while never leaving that WebView? The usual purpose is: to open another application.
<preference name="Scheme" value="https" />
<allow-navigation href="https://my-backend-url-to-avoid-CORS.com/*"/>
Unfortunately there is a lot of mismatching between the Cordova Android Platform version and plugins versions, which lead to some waste of time for nothing. Said so, for similar problemas I had like this I simply fixed them downgrading the version of Cordova or Android or the Plugin (or use the same version of android the plugin is using in their code example).

Phonegap Developer App and Phonegap Build have different behavior

I`m developing mobile app using phonegap build for android and iOS platforms. iOS version looks fine and identically both on build version and Phonegap Developer App. Also Phonegap Developer App works in the same way for Android.
But when I install phonegap build's apk-file to Android, some html-layout for specific div gets wrong scale, as if I wrote another width in css for this div. But the rest part of my application looks ok.
The most confusing thing for me in this situation is different appearance of Phonegap Build app and phonegap develop app. I tried to remove all plugins from config.xml to check if they influence somehow to app's behavior, but the result was the same. So my question is: why there may be distinctions in behavior of build and developer versions?
<?xml version='1.0' encoding='utf-8'?>
<widget id="myapp" ios-CFBundleIdentifier="myapp" version="1.0.3" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
<name>Test App</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" />
<access origin="*" />
<allow-intent href="*" />
<allow-navigation href="*" />
<preference name="fullscreen" value="false" />
<preference name="Orientation" value="portrait" />
<preference name="DisallowOverscroll" value="true" />
<preference name="android-minSdkVersion" value="16" />
<edit-config file="AndroidManifest.xml" mode="overwrite" target="/manifest/application/activity[#android:name='MainActivity']">
<activity gap:configChanges="orientation|keyboardHidden" gap:windowSoftInputMode="adjustPan" />
</edit-config>
<branch-config>
<branch-key value="some_key" />
<uri-scheme value="some_value" />
<link-domain value="some_domain" />
<ios-team-release value="some_value" />
</branch-config>
</widget>
It looks ok
It looks wrong (the circle)
If you did not use responsive design, you will need to reduce the size of the image, as this happens on every different device.
If the problem is with the HTML content size, it sounds as a viewport issue. All manufacturers tend to alter the Android webview engine, so to ensure your app looks the same on most devices you must add this meta-tag to the head section of your index.html file:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
This means that:
User cannot zoom inside your app
The initial zoom is 100% (means no zoom)
The viewport width (page horizontal size) is the same as the device width
The viewport height is the same as the device height
To prevent issues like this, you should create your app with the sample index.html generated by Cordova when you create a new app using the command line interface. This creates an app with an index.html and CSS file with the proper structure to ensure it will look (mostly) identical on every device.

Splashscreen spinner change color

I am building an android webapp using cordova and framework7 for an existing drupal site. I'm currently using cordova-plugin-splashscreen for the app's spashscreen. I am able to enable or disable the spinner but not change the color of it.
I want to change the color of the spinner and also change the position to bottom of the screen.
I have tried the solution in this
link, but its not working. please don't mark this as duplicate and give a solution.
This is the part where i include the spinner in config.xml
<preference name="loadUrlTimeoutValue" value="700000" />
<preference name="ShowSplashScreenSpinner" value="true"/>
<preference name="SplashScreenSpinnerColor" value="#242424"/>
<plugin name="cordova-plugin-splashscreen" spec="~3.2.2" />
<engine name="android" spec="~6.0.0" />
Note: In the cordova site, the SplashScreenSpinnerColor preference is given as a quirk for windows.

config.xml vs AndroidManifest.xml?

In Cordova/Android, what's the difference between:
/appname/config.xml
/appname/platforms/android/AndroidManifest.xml
Which one do I edit, or do I edit them both?
I'm looking to do things such as:
force portrait mode (I found this setting in config.xml)
specify minimum sdk supported for android. (I found this setting in AndroidManifest.xml)
You support to modify at /appname/config.xml
When you add a platform, ionic will regenerate /appname/platforms/android/AndroidManifest.xml file for you to build android app. So, it will collect the permission from your plugin and config.xml to build AndroidManifest.xml
Only update config.xml (not AndroidManifest.xml as it gets generated whenever you do a build)
For example to do portait add in config.xml:
<preference name="orientation" value="portrait" />
And to set minimum sdk add in config.xml:
<platform name="android">
<preference name="android-minSdkVersion" value="19" />
</platform>

splash screen is not showing on android

i have really searched about the problem but didn't find the correct solution that's why again here..
i have a Ionic+ Cordova project i want to show Splash Screen on android. project include a
res folder and inside that a drawable folder where i have placed my screen.png which i want to show.
but the problem is the file is not showing .
what is the problem how to show
i have include below line of code in config.xml which is inside of root folder
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="20000" />
<preference name="auto-hide-splash-screen" value="false" />
and my splash screen is here
platforms/android/res/drawable/screen.png
before app load a black than white backgound shows..
You need to install the splashscreen plugin in order to use it.
You can write the preferences in the config.xml, but I would recommand to do use the platform tag. Also make sure that you provide a splashscreen for each resolution in the drawables folder
<platform name="android">
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="1500" />
</platform>
Did you add the SplashScreen to AndroidManifest.xml ?

Categories

Resources