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.
Related
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
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
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.
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.
I have followed the very clear instructions on this page:
https://build.phonegap.com/docs/config-xml
I have included the following line in my config.xml file (which is indeed located at the top level of my app):
<preference name="fullscreen" value="true" />
And yet the status bar at the top of the screen remains.
Here is my full config.xml file if it helps..
<?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.universeprojects.voidspace"
versionCode="10"
version = "0.1.2b">
<!-- versionCode is optional and Android only -->
<name>VoidSpace - DevServer</name>
<description>
This is a special version of VoidSpace that connects to the development server.
</description>
<author href="https://voidspace.ca" email="support#universeprojects.com">
Nikolas Gauvreau
</author>
<preference name="EnableViewportScale" value="true" />
<preference name="fullscreen" value="true" />
<preference name="webviewbounce" value="false" />
<icon src="icon.png" />
<gap:splash src="splash.png" />
</widget>
Any help is appreciated, thanks!
Just place your config.xml file, modified as you need, at the same directory, as the index.html file:
Note: in this case, we have our application built in the public/ dir. So all the stylesheets and javascripts are already compiled and placed within one.
And now just observe the magic!
Add <preference name="fullscreen" value="true" /> in this path:
res/xml/config.xml.
It really worked for me