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.
Related
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).
The problem I am encountering is that I want to unable the orientation on the application that is running on my tablet, I only want landscape view.
I have created the application using cordova, then added the platform "Android". Then I moved the config.xml into the www folder with HTML, CSS and JavaScript code and added the code line below inside config.xml.
Then I zip the www folder with config.xml, and used PhoneGap Build, to convert to an Android application.
When I test this on the tablet, the orientation does not work. How can I prevent orientation on the tablet by using config.xml?
I found the preference here.
<preference name="Orientation" value="landscape" />
Config.xml:
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.BachelorProject.KPEC" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>ProjectKPEC</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" />
<access origin="*" />
<preference name="Orientation" value="landscape" />
</widget>
Preference attribute values are case sensitive I think.
Try:
<preference name="orientation" value="landscape"/>
Instead of
<preference name="Orientation" value="landscape" />
I found out the problem, just built the whole project and added android platform again, then I moved config.xml inside www folder, and it worked.
I've created a very simple mobile app with phonegap which doesn't do anything network related. All resources (images, css, etc) are local and I don't do any ajax calls to a remote server. But when I check the mobile data screen on my phone, I see that it has used some data. See screenshot bellow (4th app called "cherouvim phonegap test"). It says 308KB and that was in 5 hours.
Clicking on that gives me the following breakdown:
foreground: 91.23KB
background: 217KB
html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, width=device-width" />
<script type="text/javascript" src="phonegap.js"></script>
</head>
<body>
...
</body>
</html>
I build with phonegap build and my config.xml is:
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "cherouvim.test"
version = "1.0.0">
<name>cherouvim phonegap test</name>
<description>...</description>
<preference name="phonegap-version" value="3.5.0" />
<preference name="android-installLocation" value="auto" />
<preference name="orientation" value="portrait" />
<preference name="fullscreen" value="true" />
<gap:plugin name="org.apache.cordova.media" />
<feature name="http://api.phonegap.com/1.0/network" />
<access origin="*" />
<gap:platform name="android" />
</widget>
In the documentation it says:
<!-- If you do not want any permissions to be added to your app, add the
following tag to your config.xml; you will still have the INTERNET
permission on your app, which PhoneGap requires. -->
<preference name="permissions" value="none"/>
Is this a hint that Phonegap actually does something network related behind the scenes?
Edit: In case it matters I'm using nexus 5 (android 4.4.4) and I've enabled the "developer mode" and the ART runtime.
Building the app in phonegap build with the "enable debugging" option set injects the following just before </body>.
<script type="text/javascript" src="http://debug.build.phonegap.com/target/target-script-min.js#35fd7e24-189a-11e4-8c3c-e63707b18140"></script>
This is used for the weinre remote debugger of phonegap build.
Building without the "enable debugging" option doesn't inject this remote script. So, an app built for production use wouldn't actually use any mobile data as I initially thought it would.
I am new to Cordova App development.
I have a Youtube URL and I want to embed the video in Cordova app. I have tried making it with YouTube Api(JS Library) and with iframe also. What do I have to do to make the video load on the Android app?
For me, the solution was editing config.xml file adding the following lines:
<preference name="AllowInlineMediaPlayback" value="true" />
<preference name="MediaPlaybackRequiresUserAction" value="false" />
<allow-navigation href="*youtube*" />
<allow-navigation href="*ytimg*" />
<allow-navigation href="*youtube-nocookie*" />
Using iframe is the preferred and suggested way to embed youtube videos, so this is how you need to proceed. The getting started code from the YoutTube iframe API reference loads and works in both iOS (tested on iOS 7) and Android (tested on Android 4.3).
Adding the parameter feature=player_embedded to the iframe url worked fine for me:
<iframe width="640" height="360" src="http://www.youtube.com/embed/*********?feature=player_embedded" frameborder="0" allowfullscreen></iframe>
Unless you are using <access origin="*" /> (not recommended) you will need to allow the following domains with your config.xml to embed youtube videos in an cordova android app:
<access origin="https://*.youtube-nocookie.com" />
<access origin="https://*.youtube.com" />
<access origin="https://*.ytimg.com" />
<access origin="https://*.gstatic.com" />
<access origin="https://*.googlevideo.com" />
<access origin="https://*.google.com" />
This is for use with the privacy-enhanced embed mode. The youtube-nocookie domain presumably is not needed for a standard embed.
If you use a content security meta tag you will also need to allow those domains in your csp.
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.