I have an android app that we are deploying to the problematic BES12 secure workspace. This has a web browser which has to use a proxy.
This app is really simple, it opens a webpage, however it opens using a browser within the app which will not use the proxy settings.
I need this app to open a webpage but using the PHONE BROWSER (i,e outside of the app).
I have read, and followed multiple threads about opening a URL in the phone browser and NOT the app and none of them work.
Here is my config.xml file
<?xml version="1.0" encoding="UTF-8" ?>
http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "(removed for security)"
version = "1.1.2"
versionCode = "10" >
<!-- versionCode is optional and Android only -->
<preference name="phonegap-version" value="3.6.3" />
<name>cURLs</name>
<description>
FGW Corporate URL Library
</description>
<author href="(removed for security)" email="(removed for security)">
Morgan
</author>
<icon src="icon.png" />
<preference name="orientation" value="portrait" />
<access origin="*" browserOnly="true"/>
<gap:plugin name="org.apache.cordova.inappbrowser" version="0.5.2" />
and here is the app itself (REALLY simple, only in its infancy)
<html>
<head>
<title>
App Library
</title>
<meta name="apple-mobile-web-app-status-bar-style" content="blue">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<script src="phonegap.js"></script>
</head>
<body>
<div class="container-fluid">
<p class="text-center" style="margin-top: 20%;">
<img src="icon.png" style="width:50%;">
</p>
<h1 class="text-center">
Welcome to cURLs
</h1>
<h2 id="show-once" class="text-center">cURLs is Loading..</h2>
<p id="slow-button" class="text-center" style="padding-top: 100px;">
<button type="button" class="btn btn-primary btn-large text-center" onclick="window.open('http://(removed for security)', '_blank', 'location=yes');">Reload cURLs Library</button>
</p>
</div>
</body>
<script>
// redirect to google after 5 seconds
window.setTimeout(function() {
window.open('http://(removed for security)', '_blank', 'location=yes');
}, 2000);
</script>
</html>
In essense the first time it runs, it auto opens the URL, but the app will stay in the background to reload latest versions if needed via the button.
All I want this to do is to open the URL OUTSIDE of the app, i.e. in the default browser.
I have also tried a target of "_system"
Many thanks in advance for helping to end this headache
Well. So simple, it bites..
Added the following to my config.xml file
<preference name="stay-in-webview" value="false" />
and now done
Related
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 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 updated my code from jqm 1.3.2 to 1.4.0. To make sure that there were no issues after the upgrade I copied the navigation buttons to a test file. Sure enough, it does not work on the mobile browser on Samsung Galaxy 3 but works fine in Chrome. It also works fine in Chrome, FF 26.0, and IE 11 on a win 7 laptop. Here is my code -
<!DOCTYPE html>
<html>
<head>
<title>whnwh</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.4.0.css" />
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery.mobile-1.4.0.js"></script>
</head>
<body>
<div data-role="page" id="p_home" data-title="when n where" data-theme="a">
<div data-role="header"><!-- header -->
<p />
<img src="images/logo.png" />
</div><!-- /header -->
<div role="main" class="ui-content">
<div data-role="controlgroup" data-mini="false" data-corners="false" data-type="horizontal"><!-- navbar -->
home
my calendar
add
sign in
sign out
</div>
</div><!-- /navbar -->
</div><!-- page p_home -->
</script>
</body>
</html>
This is how the above page looks in Galaxy browser -
and in Chrome on Galaxy as well as all browsers on laptop -
So, what can I do to fix this?
Thanks in advance.
RD
I guess either no one has run into this problem or no one has an answer.
I have lost a day in migrating and fixing all incompatibilities between 1.3.2 and 1.4.0.
I am frustrated, will revert back to 1.3.2 jqm and take this task on at some later time.
You are not alone!
The following configuration was incompatible with my android galaxy 2.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
I tested jquery-1.10.2.min.js separately and it works just fine. It's only because of jquery.mobile-1.4.1.min.js.
Previous jquery mobile version will work which is
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
I am working on phonegap to build an application for both android and iPhone. This is the first application I am building for phonegap but I am facing some severe issues. Firstly I am explaining what I am doing in this application
I have created a www folder which consist of two html file(index.html,dashboard.html) and some css and js(there is a cordova.js which is in Phonegap 2.9.0) files.
And I have created a config.xml file.
And after that I have made a zip file and paste it in the upload section in https://build.phonegap.com
Here is my config.xml file
<?xml version="1.0" encoding="utf-8"?>
<cordova>
<!--
access elements control the Android whitelist.
Domains are assumed blocked unless set otherwise
-->
<access origin="http://127.0.0.1*"/> <!-- allow local pages -->
<!-- <access origin="https://example.com" /> allow any secure requests to example.com -->
<!-- <access origin="https://example.com" subdomains="true" /> such as above, but including subdomains, such as www -->
<access origin="http://google.com" subdomains="true" />
<access origin=".*"/>
<!-- <content src="http://mysite.com/myapp.html" /> for external pages -->
<!-- <content src="index.html" />-->
<log level="DEBUG"/>
<preference name="phonegap-version" value="2.9.0" />
<preference name="useBrowserHistory" value="true" />
<preference name="exit-on-suspend" value="false" />
<plugins>
<plugin name="App" value="org.apache.cordova.App"/>
<plugin name="Geolocation" value="org.apache.cordova.GeoBroker"/>
<plugin name="Device" value="org.apache.cordova.Device"/>
<plugin name="Accelerometer" value="org.apache.cordova.AccelListener"/>
<plugin name="Compass" value="org.apache.cordova.CompassListener"/>
<plugin name="Media" value="org.apache.cordova.AudioHandler"/>
<plugin name="Camera" value="org.apache.cordova.CameraLauncher"/>
<plugin name="Contacts" value="org.apache.cordova.ContactManager"/>
<plugin name="File" value="org.apache.cordova.FileUtils"/>
<plugin name="NetworkStatus" value="org.apache.cordova.NetworkManager"/>
<plugin name="Notification" value="org.apache.cordova.Notification"/>
<plugin name="Storage" value="org.apache.cordova.Storage"/>
<plugin name="FileTransfer" value="org.apache.cordova.FileTransfer"/>
<plugin name="Capture" value="org.apache.cordova.Capture"/>
<plugin name="Battery" value="org.apache.cordova.BatteryListener"/>
<plugin name="SplashScreen" value="org.apache.cordova.SplashScreen"/>
<plugin name="Echo" value="org.apache.cordova.Echo" />
<plugin name="Globalization" value="org.apache.cordova.Globalization"/>
<plugin name="InAppBrowser" value="org.apache.cordova.InAppBrowser"/>
<plugin name="VideoPlayer" value="com.phonegap.plugins.video.VideoPlayer"/>
<plugin name="PdfViewer" value="com.phonegap.plugins.pdf.PdfViewer"/>
<plugin name="FileOpener" value="com.phonegap.plugins.fileOpener.FileOpener"/>
<plugin name="Downloader" value="com.phonegap.plugins.downloader.Downloader"/>
<plugin name="StatusBarNotification" value="com.phonegap.plugins.statusBarNotification.StatusBarNotification"/>
</plugins>
</cordova>
And my index.html file is like that:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--><head>
<meta charset="utf-8" />
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sid Agency App</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="js/file.js"></script>
<script type="text/javascript" charset="utf-8" src="js/downloader.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/organictabs.jquery.js"></script>
<script type="text/javascript">
$(function() {
$("#main_container").organicTabs();
});
</script>
<script type="text/javascript">
$(document).ready(function() {
var value = window.localStorage.getItem("key");
if (value == "5") {
top.location.href = "dashboard.html";
} else {
$("#content").css("top", $("#header").height() + "px");
$("#content").height($(window).height() - $("#footer").height() + "px");
$("#content_inner").height($("#content").height() - $("#footer").height() + "px");
var user_data = {
login_id: 1234,
pin_code: 1234
};
...........//so on
And my App id in build.phonegap.com is 401033.
I have made some code in my src file for plugin in eclipse.
But My issue is
Now when I am testing the application from eclipse to my device it is working as expected.
When I am testing the app in iPhone simulator through xcode nothing is coming except some alert like gap:["Device","getDeviceInfo","Device984611098"],
gap:["NetworkStatus","getConnectionInfo","NetworkStatus984611099"], gap:["App","show","App984611100"] .
Now if i remove this line from both html file App is working fine in simulator.
<script type="text/javascript" src="js/cordova.js"></script>
But when I am downloading the apk file from build.phonegap.com I can see everything is running fine except the plugins like Fileopener, Downloader (you can see i have mentioned it in config.xml file within plugin tag). None of these plugins are working at all.
Same when I am downloading .ipa file from build.phonegap.com in iPhone nothing is coming as every content is coming trough ajax i cant see them any of them but it is coming in android.
I have tried a lot to fix the problem but nothing helps. Can anyone help me? what's wrong I am doing? Thanks in advance.
if you installed phonegap for android for your app,
install phonegap for ios using their guide, then copy the js/cordova.js file from the HelloWorld app you created and use it.