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.
Related
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.
I have a basic cordova app running on android that loads my main web app in a webview.
When running my web app via cordova it will not download any pdf's over https that are located in the same hosting subscription as my app.
Downloading pdf's over https from other websites work fine - including other hosting subscriptions on the same server.
Downloading pdf's over http work fine no matter where the are hosted.
All other files (including txt files) download ok no matter where they are hosted (either by http or https).
EXAMPLE:
https://mywebsite.com/test.txt (DOWNLOADS OK)
https://mywebsite.com/test.pdf (DOES NOT DOWNLOAD)
http://mywebsite.com/test.pdf (DOWNLOADS OK)
https://anyanotherwebsite.com/test.txt (DOWNLOADS OK)
https://anyanotherwebsite.com/test.pdf (DOWNLOADS OK)
http://anyanotherwebsite.com/test.pdf (DOWNLOADS OK)
MY CODE:
This is my cordova "index.html" file:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="app">
<p>Loading</p>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
This is my cordova "index.js" file:
var app = {
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
},
onDeviceReady: function() {
var targetUrl = "https://cordova1.mydevelopmentserver.com/";
window.location.replace(targetUrl);
},
};
app.initialize();
This is my cordova "config.xml" file:
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.company_name.someid" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>My Awesome App</name>
<author email="dev#cordova.apache.org" href="http://cordova.io">Apache Cordova Team</author>
<content src="index.html" />
<preference name="SplashScreen" value="screen" />
<plugin name="cordova-plugin-whitelist" spec="1" />
<access origin="*" />
<allow-navigation href="https://*.cordova1.mydevelopmentserver.com/*" />
<allow-navigation href="file://*" />
<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>
<preference name="ShowTitle" value="True" />
<preference name="Fullscreen" value="False" />
<plugin name="cordova-plugin-device" spec="^2.0.1" />
<engine name="android" spec="^7.0.0" />
</widget>
Have also trying change the config.xml settings to below but it still does not work:
<access origin="*" />
<allow-navigation href="*" />
<allow-intent href="*" />
DOWNLOAD SAMPLE CORDOVA PROJECT:
https://drive.google.com/file/d/1Z3TZudstF5WqquW6M-bv-8cit3nUFNcI/view?usp=sharing
The sample cordova project redirects to https://cordova1.mydevelopmentserver.com which contains the following html file which can be used to test the issue. I have also setup https://cordova2.mydevelopmentserver.com exactly the same & the issue still occurs with that domain as well.
<!DOCTYPE html>
<html>
<head>
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;"> -->
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<title>Hello World</title>
</head>
<body>
<p>https://cordova1.mydevelopmentserver.com/test.txt</p>
<p>https://cordova1.mydevelopmentserver.com/test.pdf</p>
<p>http://cordova1.mydevelopmentserver.com/test.pdf</p>
<hr>
<p>https://cordova2.mydevelopmentserver.com/test.txt</p>
<p>https://cordova2.mydevelopmentserver.com/test.pdf</p>
<p>http://cordova2.mydevelopmentserver.com/test.pdf</p>
</body>
</html>
OTHER NOTES:
I don't think that it is not an issue with the server as links to a pdf from another website on the same server works ok.
I don't think that it is not an issue with the SSL certificate as other links to hosting subscription with the same SSL work ok.
I'm new to cordova but think it may be an issue with my configuration somewhere but have already ripped out as much of the config as I can.
Cordova version: 7.0
Android version: 7.0
Phone: Samsung S8+
Also tested it on a Samsung S4 running Android 5.0.1 but have the same issue.
Using your example I could reproduce your issue & it looks like it is related to using the WebView. If I use the InAppBrowser I can open PDF's over https fine (no matter where they are).
Hopefully you can at least use the InAppBrowser until a proper solution is found.
If you are sure of SSL validity try to set properly content security policy or cordova allow origin of whitelist plugin: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-whitelist/
For suspect invalid SSL certificate take a look here: http://ivancevich.me/articles/ignoring-invalid-ssl-certificates-on-cordova-android-ios/
From my experience i think is somekind of issue related to trust your cert from cordova webview, in the above link you may try to implement onReceivedSslError handle and look if SSL cert have a problem.
Try to test your SSL cert here to make sure it not have issues: https://www.ssllabs.com/ssltest/
In Handshake Simulation report you are able to verify many mobile platform and webviews version to check if certificate is trusted or not.
Hope it helps.
Since using Cordova version 6, I have a siginificant problems using a Iframe. The Iframe-URL, I'm calling works fine in each browser, also in cordova-app on emulator. But on real devices, I have a really big problem using this Iframe.
What I'm doing:
Connecting to Qlik Sense Server (Qlik is a Business Intelligence Software) via Single API, using a link like this:
https://my-server.com/single/?appid=bba3d39c-4570-4056-8d49-5b64405647d8&sheet=kwZkH&select=clearall&opt=debug
Beacause, I'm not logged in yet, I will be automatically routet to this authentication site:
https://my-server.com:4244/form/?targetId=a0553562-06f5-4c5b-b4ba-69b6859d0cef
After logging in successfully, the URL turns back to the Single-API URL, extended with a qlikTicket for the session.
https://my-server.com/single/?appid=bba3d39c-4570-4056-8d49-5b64405647d8&sheet=kwZkH&select=clearall&opt=debug&qlikTicket=S_SPh6fvNkTecbz9
So what's my real problem? Since using the latest Cordova version 6, the redirection from authentication to the origin Single-URL crashes. The session is enabled for less than a second and then turns me back to authentication site.
This problem only occurs on real Android devices. Using the this link in browser, works. Using Iframe in browser, works. Trying out the cordova application on Android emulator, everything works fine! Trying out the cordova application on real Android devices, doesn't work!
What's going wrong?
Does have cordova any problems holding the qlikTicket in URL? Because I'm directly redirected to authentication site.
I know that there is a new security model since cordova 5. So I've implemented the cordova-whitelist-plugin and granted all access to intents, navigation and acces, as you can see here in my config.xml:
<widget id="de.inform.feliosmobile4" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>FELIOSMobile</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<icon src="res/icon.png" platform="android" width="57" height="57" density="mdpi" />
<author email="dev#cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<plugin name="cordova-plugin-whitelist" source="npm" spec="1.3.0" />
<allow-navigation href="*" />
<allow-intent href="*" />
<access origin="*" />
This is what my index.html looks like(Iframe is build at the end of code):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; frame-src 'self' https://*/*">
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<title>BeaconRanging</title>
<link rel="stylesheet" type="text/css" href="css/test.css">
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="cordova.js"></script>
</head>
<body>
<!-- MONTAGE -->
<div class="popup" id="popupMONTAGE">
<center>
<div class="btnMachineGroup">Bitte Maschine wählen:</div>
<br />
<button class="btnMachineGroup" onclick="setRessource(421,'MONTAGE')">Montage Metall WA</button>
<br />
<button class="btnMachineGroup" onclick="setRessource(423,'MONTAGE')">Montage Metall AGW</button>
<br />
<button class="btnMachineGroup" onclick="setRessource(422,'MONTAGE')">Montage Metall GBK</button>
<br />
<button class="btnMachineGroup" onclick="setRessource(427,'MONTAGE')">Montage Spezialbohrkopf</button>
<br />
<button class="btnMachineGroup" onclick="setRessource(824,'MONTAGE')">Montage Service Metall</button>
<br />
<br />
<button class="btnMachineGroup" onclick="hidePopup('MONTAGE')">Schliessen</button>
</center>
</div>
<br /><br />
<div class="container">
<iframe id="qlikframe" src="https://my-server.com/single/?appid=bba3d39c-4570-4056-8d49-5b64405647d8&sheet=kwZkH&select=clearall&opt=debug"></iframe>
</div>
</body>
</html>
So does anybody have an idea what is happening here and why? I've already contacted Qlik support. There is no problem from Qlik side.
... Using cordova version 4, all ran perfectly and I had no problems. Building the same code in cordova 6, the app doesn't run as it should.
What you can find in LOG-file from the Cordova-App is the following:
11-07 13:40:39.855 13009 13009 I chromium: [INFO:CONSOLE(44)] "TypeError: Cannot redefine property: qlikTicket
So it seems, that the additional auth-info in URL (qlikTicket) gets lost. How to prevent this?
I would like to know how can I open an url in the app context of embed webview. Currently this demo will open a new tab in external browser, so, not what I am expected. I am using google.com just for testing.
Summary, I am looking for a functional demo.
<?xml version="1.0" encoding="UTF-8"?>
<!-- config.xml reference: https://build.phonegap.com/docs/config-xml -->
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
xmlns:android = "http://schemas.android.com/apk/res/android"
id = "com.xxx.xxxxx"
version = "1.0.0">
<preference name="stay-in-webview" value="true" />
<access origin="*" browserOnly="true" subdomains="true" />
<content src="index.html" />
<allow-navigation href="https://google.com/*" />
<gap:plugin name="cordova-plugin-whitelist" source="npm" version="~1" />
<gap:plugin name="org.apache.cordova.inappbrowser" />
<gap:plugin name="org.apache.cordova.splashscreen" />
<preference name="phonegap-version" value="cli-5.4.1" />
<preference name="permissions" value="none"/>
<preference name="target-device" value="universal"/>
<preference name="fullscreen" value="true"/>
</widget>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
<div>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
window.location.href = 'https://google.com';
}
</script>
</div>
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>
Update:
Complete xml file:
https://codeshare.io/Vw3Fl
try :
window.open('https://google.com', '_self ', 'location=yes');
instead of :
window.location.href = 'https://google.com';
This will use the InAppBrowser, and use _self as target.
You have to add this line on the config.xml to allow navigation to external urls
<allow-navigation href="*" />
This will allow navigation to any external url, if you just want to allow the navigation to google then add this line
<allow-navigation href="https://google.com" />
You can check the rest of the documentation on the plugin page
https://github.com/apache/cordova-plugin-whitelist
For those having this problem while using Phonegap 6.3.1, you should whitelist the urls properly and use the cordova-plugin-inappbrowser plugin.
Read on for how to do this.
First, ensure you have whitelisted the urls you want to open. You do this by adding them to the hrefs of <access> tags, <allow-intent> tags and allow-navigation tags in your config.xml file at the root of the project. Something liek th:
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.phonegap.helloworld" version="1.0.0"
xmlns="http://www.w3.org/ns/widgets"
xmlns:gap="http://phonegap.com/ns/1.0">
...
<access origin="*" />
<allow-intent href="*" />
<allow-navigation href="*" />
...
</widget>
(Note: the "*" in the above hrefs allows the opening of any url/path. In production, you probably want to restrict to certain urls/paths)
Next, in your index.html file, add the following javascript:
<script type="text/javascript">
document.addEventListener('deviceready', function() {
var url = 'https://www.google.com' // change to whatever you want
cordova.InAppBrowser.open(url, '_self', 'location=no');
}, false)
</script>
This script uses the cordova-plugin-inappbrowser plugin, which, if you generated your application using the standard Phonegap template, should already be included in your config.xml file.
The script waits for the device to be ready, then uses the cordova-plugin-inappbrowser plugin to open the given url. The '_self' parameter means it opens the page in the Phonegap webview and the 'location=no' means that there will be no address bar. For other parameter options see the documentation for the cordova-plugin-inappbrowser plugin (link above).
Finally, to test the application in the appropriate emulators (assuming you have the Phonegap CLI installed), run the following command(s):
phonegap run ios --verbose --stack-trace
phonegap run android --verbose --stack-trace
You may have to add the following to your phonegap xml file:
<?xml version="1.0" encoding="UTF-8"?>
<phonegap>
<access origin="https://abcx.com" subdomains="true" />
</phonegap>
A very simple way to open page in system browser in a phonegap application is by rendering that page in an iframe.
<iframe src="http://www.google.com></iframe>
You can change the URL in the iframe using dom update.
This will load in the page in the native system browser.
install the following plugin by typing these commands in your project directory
phonegap plugin add cordova-plugin-whitelist
phonegap prepare
then add the following following tags in index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline' gap:; style-src 'self' 'unsafe-inline'; media-src *" />
<style>
*{
margin: 0px;
padding: 0px;
} body {width:100%;height:100%;margin:0;overflow:hidden;background-
color:#252525;}
#my_iframe{
border: 0px;
height: 100vh;
width: 100%;
}
</style>
<title>ProjectName</title>
</head>
<body>
<iframe src="PUT_HERE_YOUR_PROJECT_URL" id="my_iframe" frameborder="0" width="100%" height="100%" >
</iframe>
</body>
</html>
I've been struggle for some times to make it work the vibration notification with PhoneGap build version 3.1.0
DeviceReady works, and I'm getting alert and beep notifications but not vibrate. The app resides in an external server and is dynamic based on PHP.
NOTE: I'm using the cordova.android.js from here http://archive.apache.org/dist/cordova/ "cordova-3.1.0-src.zip". After unzipping, the file was residing under "cordova-android.zip" -> test/assets/www/cordova.android.js. I don't know if this is the right file, but I'm not getting errors whatsoever when I run the app.
When the app is built in PhoneGap (online) not standalone, I can see the plugin installed as follow:
Installed PhoneGap Plugins
org.apache.cordova.device - 0.2.8
org.apache.cordova.dialogs - 0.2.6
org.apache.cordova.vibration - 0.3.7
Here is my xml config file
<?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.craving.craving"
version = "1.1">
<name>Two Minute Craving Dr.</name>
<description>
Web App by Support
</description>
<author href="http://sampe.com" email="support#support.com">
Support Team
</author>
<feature name="http://api.phonegap.com/1.0/device" />
<preference name="phonegap-version" value="3.1.0" />
<feature name="Notification">
<param name="android-package" value="org.apache.cordova.Notification" />
</feature>
<gap:plugin name="org.apache.cordova.core.vibration" />
<gap:plugin name="org.apache.cordova.device" />
<gap:plugin name="org.apache.cordova.dialogs" />
<gap:plugin name="org.apache.cordova.vibration" />
<preference name="splash-screen-duration" value="5000" />
<preference name="orientation" value="default" />
<preference name="fullscreen" value="false" />
<icon src="images/icon-72.png" gap:platform="android" gap:density="hdpi" gap:role="default" />
<gap:splash src="images/screen-portrait.png" gap:platform="android" gap:density="xhdpi" />
<access origin="*" />
</widget>
html /php code
<!DOCTYPE html>
<html lang="en">
<head>
<title><?=$metatitle;?></title>
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<script type="text/javascript" charset="utf-8" src="/js/cordova.android.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", function(){
navigator.notification.vibrate(1000);
navigator.notification.alert("Hello");
navigator.notification.beep(1);
//alert();
}, false);
</script>
</head>
<body>
code goes here
</body>
</html>
ANY VALID ANSWER OR HELP IS REALLY APPRECIATED!
Thank you all