IFrame Fills Area on PhoneGap instead of Fixed Position - android

My app works perfectly fine in the browser.
What I do is I show and hide this iFrame using a checkbox.
However when I released it for android, the new iFrame I added fills the entire page instead of having it's fixed position which I stated in CSS.
I'm converting my app to an Android app using PhoneGap Build.
My app uses the following permissions.
<preference name="permissions" value="none"/>
<preference name="orientation" value="default"/>
<preference name="target-device" value="universal"/>
<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"/>
<gap:plugin name="org.apache.cordova.file"/>
<gap:plugin name="org.apache.cordova.file-transfer"/>
<gap:plugin name="org.apache.cordova.inappbrowser"/>
<gap:plugin name="org.apache.cordova.network-information"/>
<access origin="*"/>
<plugin name="cordova-plugin-whitelist" version="1"/>
<preference name="phonegap-version" value="cli-5.2.0" />
<preference name="android-minSdkVersion" value="7" />
<preference name="android-targetSdkVersion" value="19" />
<preference name="AndroidPersistentFileLocation" value="Compatibility" />
Can someone explain why my app fills the page and does anyone know of a way to solve this problem?

EDIT:
I was able to fix the problem two different ways.
I merged the html of that page into my main app and merged the script into my main script.
I also fixed it using the .load JQuery API.
Even though I was able to solve my problem here I still don't understand why the iFrame filled the entire page.

Related

Cordova Webview and Splashscreen dont work

I installed Cordova plugin:
cordova-plugin-crosswalk-webview
Everything works fine with this plugin, but then I installed
cordova plugin add cordova-plugin-splashscreen
for creating splashscreen. In file config.xml in widget section I put this code:
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="5000" />
<preference name="AutoHideSplashScreen" value="true" />
<preference name="ShowSplashScreenSpinner" value="false" />
Build was successful. After start application it shows splashscreen (for 5 second), but when splashscreen is disappear, it shows just white page instead my app. After I remove webview plugin - everyting works fine. How can I fix that problem?

Enable webRTC in cordova webview

I have something like this in my cordova app
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
window.location.href = 'https://mobile.xxx.com';
}
Now I need to use webRTC in this website. And works fine when I run it in mobile browser (chrome 54.0.2840.85).
However, when I use the apk, the webview will not load the webRTC features like camera or micro.
So, in mobile browser it works fine, in webview the rtc will not work.
This is what I have in config.xml
<content src="index.html" />
<access origin="https://mobile.xxx.com" />
<allow-navigation href="https://mobile.xxx.com" />
<allow-intent href="https://mobile.xxx.com" />
<plugin name="cordova-plugin-network-information" version="1.3.0" source="npm" />
<plugin name="cordova-plugin-splashscreen" version="4.0.0" source="npm" />
<plugin name="cordova-plugin-whitelist" version="1.3.0" source="npm" />
<plugin name="cordova-plugin-dialogs" version="1.3.0" source="npm" />
<plugin name="cordova-plugin-statusbar" version="2.2.0" source="npm" />
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="phonegap-version" value="cli-6.3.0" />
<preference name="permissions" value="none"/>
<preference name="target-device" value="universal"/>
<preference name="fullscreen" value="true"/>
<preference name="show-splash-screen-spinner" value="true" />
<preference name="stay-in-webview" value="true" />
<preference name="orientation" value="portrait" />
<preference name="loadUrlTimeoutValue" value="700000" />
Already tried crosswalk but same problem. How can I have webrtc in cordova webview?
To clarify, I am just looking for a functional demo.
I'm not sure what WebRTC specific features you're using but it isn't fully supported yet for most mobile browsers. See here.
As far as I understood from https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos , to access media we are supposed to make navigator.mediaDevices.getUserMedia
Similarly for mobile app, you will have to specify the permissions in config.xml related to camera or microphone that you are using.
For media access
<plugin name="cordova-plugin-media-capture" spec="1.4.0">
<variable name="CAMERA_USAGE_DESCRIPTION" value="To take videos"/>
<variable name="MICROPHONE_USAGE_DESCRIPTION" value="To record voice while taking videos"/>
<variable name="PHOTO_LIBRARY_USAGE_DESCRIPTION" value="To provide photo browsing."/>
</plugin>
For camera access
<plugin name="cordova-plugin-camera" spec="2.3.0">
<variable name="CAMERA_USAGE_DESCRIPTION" value="To take photos"/>
</plugin>
For more details of using the above plugins in mobile app, refer :
https://github.com/apache/cordova-plugin-camera
https://github.com/apache/cordova-plugin-media-capture

Cordova Splashscreen Plugin - Blank white screen instead of splash image on Android

Excerpts from my root config.xml look like this:
<platform name="android">
<allow-intent href="market:*" />
<splash src="www\web\splashscreen\drawable-hdpi\screen.png" density="hdpi"/>
<splash src="www\web\splashscreen\drawable-ldpi\screen.png" density="ldpi"/>
<splash src="www\web\splashscreen\drawable-mdpi\screen.png" density="mdpi"/>
<splash src="www\web\splashscreen\drawable-hdpi\screen.png" density="port-hdpi"/>
<splash src="www\web\splashscreen\drawable-ldpi\screen.png" density="port-ldpi"/>
<splash src="www\web\splashscreen\drawable-mdpi\screen.png" density="port-mdpi"/>
</platform>
<preference name="SplashScreen" value="screen" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="SplashScreenDelay" value="30000" />
<preference name="SplashMaintainAspectRatio" value="false" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="FadeSplashScreen" value="true"/>
<preference name="FadeSplashScreenDuration" value="750"/>
<preference name="ShowSplashScreenSpinner" value="true" />
<plugin name="org.apache.cordova.splashscreen" spec="~3.2.2" />
So I think it's setup okay. I've tried various other paths to the screen files, but it's not made any difference. I have verified that the images are in the specified paths prior to cordova build android. No matter what I try, though, I get a blank white screen until my app loads, and no sort of error message or debug output from the splashscreen.
Any ideas?
The ideal way to add splash screen images is by placing it in res/screen/android inside your cordova project then running the build command.
By doing this all the images gets copied to platforms/android/res/drawable-* folder.
As your splash images are not showing, make sure:
They have copied to platforms/android/res/drawable-* folder
successfully
Images are in correct size for all screen resolutions

hybrid app not working with Monaca IDE

A few months back I started building a Hybrid application using Monaca IDE, now i'm trying to make some changes to it, the thing is that when I try to make a debug build to test the app it doesn't work, it doesn't even run, when it starts says "my app has to close", I didn't change the source code, I just added a few html and js files.
the index.html, the main js file and the config.xml are intact. I tested the build on android 2, 4.2 and 6, in none of them it works, I can post the necesary code that you need, right now i dont know what code I can post to help you guys!
I dont know if there's something new with the IDE i should be aware of!
here is my config.xml:
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" id="com.example.ANTELCar" version="2.0.1">
<name>Antel Car</name>
<description>Antel Car</description>
<author/>
<content src="index.html"/>
<preference name="loglevel" value="DEBUG"/>
<preference name="AndroidLaunchMode" value="singleTop"/>
<preference name="ErrorUrl" value=""/>
<preference name="SplashScreen" value="screen"/>
<preference name="monaca:DisableCookie" value="false"/>
<feature name="App">
<param name="android-package" value="org.apache.cordova.App"/>
</feature>
<preference name="AllowInlineMediaPlayback" value="false"/>
<preference name="AutoHideSplashScreen" value="false"/>
<preference name="BackupWebStorage" value="cloud"/>
<preference name="EnableViewportScale" value="false"/>
<preference name="FadeSplashScreen" value="true"/>
<preference name="FadeSplashScreenDuration" value=".25"/>
<preference name="KeyboardDisplayRequiresUserAction" value="true"/>
<preference name="MediaPlaybackRequiresUserAction" value="false"/>
<preference name="ShowSplashScreenSpinner" value="true"/>
<preference name="SuppressesIncrementalRendering" value="false"/>
<preference name="TopActivityIndicator" value="gray"/>
<preference name="GapBetweenPages" value="0"/>
<preference name="PageLength" value="0"/>
<preference name="PaginationBreakingMode" value="page"/>
<preference name="PaginationMode" value="unpaginated"/>
<feature name="LocalStorage">
<param name="ios-package" value="CDVLocalStorage"/>
</feature>
<preference name="monaca:targetFamilyiPhone" value="1"/>
<preference name="monaca:targetFamilyiPad" value="1"/>
<access origin="*"/>
<access origin="mailto:*"/>
<preference name="KeepRunning" value="false"/>
<preference name="monaca:AndroidIsPackageNameSeparate" value="true"/>
<preference name="DisallowOverscroll" value="true"/>
<preference name="Orientation" value="portrait"/>
<preference name="SplashScreenDelay" value="4000"/>
<preference name="Fullscreen" value="false"/>
<preference name="AndroidPersistentFileLocation" value="Compatibility"/>
<allow-intent href="itms:*"/>
<allow-intent href="itms-apps:*"/>
<allow-navigation href="*"/>
</widget>
The problem will not be in the IDE but within your file. When you upload a project to Monaca IDE, it does create a new blank config file. You need to make sure you set all of those settings and enable what you need for it to work. Also, if you are using custom plugins but are using the free account, those plugins will not be included.
To confirm a working environment, I recommend using one of their default templates such as the Onsen 2.0 example to test everything and make sure your design environment is setup and working.
Munsterlander gave you some good hints.
Also, if you are using custom plugins and you have imported them just by specifying the plugin's names, the latest version of them will be downloaded once you build your project again. This means that maybe the new version of the plugin is not compatible with your original configuration.
You can try to upgrade your project to Cordova 5.2 and build again to see if it works.

Android permissions in Cordova 4.0 config.xml

I used Cordova 4.0 to create a phonegap app (that has worked fine via cli on iOS), but I also want to use build.phonegap.com particularly for Android.
The main issue is that upon installing the APK on Android, the security warning lists all features, when I do not actually need any.
I have read that you can remove all permissions with <preference name="permissions" value="none" />and then selectively add back the ones you want.
However, this is not working; I still get all the permissions requested upon install. I must be missing something, or something has changed. (Did I make a mistake using Cordova instead of Phonegap? That's reasonably easy to correct..)
My config.xml is below:
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.test" version="1.0.0"
xmlns="http://www.w3.org/ns/widgets"
xmlns:cdv="http://cordova.apache.org/ns/1.0"
xmlns:gap="phonegap.com/ns/1.0"
xmlns:android = "http://schemas.android.com/apk/res/android">
<name>Test</name>
<description>
Test.
</description>
<author email="test#test.com" href="http://test.com">
Test
</author>
<content src="index.html" />
<access origin="*" />
<gap:plugin name="org.apache.cordova.statusbar" />
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#ffffff" />
<preference name="StatusBarStyle" value="default" />
<preference name="DisallowOverscroll" value="true" />
<preference name="permissions" value="none" />
</widget>
Edit: To remove ambiguity, I want to remove the Android security warnings saying this app needs full access to contacts, camera, internet access, etc. I do not need any of these.
config.xml , is just a bunch of information. It is not executed sequentially. so if you mention you require DisallowOverscroll permission and then mention you dont require any permission, it means ,
<preference name="permissions" value="none" />
will not overWrite
<preference name="DisallowOverscroll" value="true" />
for example:
<preference name="DisallowOverscroll" value="true" />
<preference name="permissions" value="none" />
and
<preference name="DisallowOverscroll" value="true" />
<preference name="permissions" value="none" />
both are same.

Categories

Resources