I created Adroid app in which I want to check the location of the mobile phone. I started the emulator install the app and every time I want to check It fails. Is the emulator the problem (bacause it os not a real mobile phone) or I did not do it correctly.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<title>Hello World</title>
<script type="text/javascript" src="cordova-2.1.0.js"></script>
<script text="text/javascript">
function startUp(){
document.getElementById("H1").innerHTML = "Checking your location...";
document.addEventListener("deviceready", onDeviceReady, false)
}
function onDeviceReady() {
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
// onSuccess Geolocation
//
function onSuccess(position) {
var element = document.getElementById('location');
element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +
'Longitude: ' + position.coords.longitude + '<br />' +
'Altitude: ' + position.coords.altitude + '<br />';
document.getElementById("H1").innerHTML = "";
}
// onError Callback receives a PositionError object
//
function onError(error) {
document.getElementById("H1").innerHTML = "Fail to check your location.";
}
</script>
</head>
<body style="margin:0px;" onload="startUp()" bgcolor="#000">
<div class="app" style="background-color:#4D4D4D">
<font color="#FF9900" size="2"><h1 id="H1" style="font-family:courier new;"></h1></font>
<p id="location"></p>
</div>
</body>
</html>
The HTML5 file and config.xml
<?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.park.manager"
versionCode="10"
version = "0.1.9">
<name>ParkingManager</name>
<description>
A system, which manages parking side areas.
</description>
<author href="" email="">
Parking Side Manager Team
</author>
<preference name="phonegap-version" value="2.1.0" />
<preference name="orientation" value="landscape" />
<preference name="target-device" value="universal" />
<preference name="fullscreen" value="true" />
<preference name="android-installLocation" value="auto" />
<icon src="icon.png" />
<gap:splash src="splash.png" />
<feature name="http://api.phonegap.com/1.0/geolocation"/>
<feature name="http://api.phonegap.com/1.0/network"/>
</widget>
make sure that in your manifest XML you add the permissions for coarse and fine location.
phone gap has its upsides, but it will not fix some of your main problems like having to do the manifest by hand. If you made your app in java before you know how to add these permissions. if not use to check how to do it.permissions
besides that your cordova geolaction call is right, I have used it before from their examples.
The last time I worked with PhoneGap the manifest already had the correct permissions in the manifest file.
You most likely need to provide mock data for the emulator.
http://developer.android.com/guide/topics/location/strategies.html#MockData
its the emulator, you need a real phone because the emulator is a pain in the you know what to get to work correctly. your Javascript and html are fine.
Related
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 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
I am developing pdf417 barcodescanner application using phonegap android. I used this . I do even upgraded cordova version to 4.1.2 using nodejs. I have given permission and features in manifest and config.xml also. But when I run this application I am getting error ' Uncaught ReferenceError: scanWithCustomUIButton is not defined'. Can you tell me where I am doing wrong
config.xml
<feature name="Pdf417Scanner">
<param name="android-package" value="com.phonegap.plugins.pdf417.Pdf417Scanner"/>
</feature>
<plugins>
<plugin name="Device" value="org.apache.cordova.Device"/>
<plugin name="Camera" value="org.apache.cordova.CameraLauncher"/>
<plugin name="Pdf417Scanner" value="com.phonegap.plugins.pdf417.Pdf417Scanner"/>
</plugins>
manifest.xml
<activity
android:name="mobi.pdf417.activity.Pdf417ScanActivity"
android:theme="#android:style/Theme.Black.NoTitleBar.Fullscreen"
android:screenOrientation="portrait" >
<intent-filter>
<action android:name="mobi.pdf417.activity.Pdf417ScanActivity" />
<category android:name="android.intent.category.DEFAULT" />
</intent-filter>
</activity>
this is my index.html and is my index.js
You can use this cordova plugin. It's 100% working.
http://docs.scandit.com/group__scanditsdk-cordova-guides.html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name = "format-detection" content = "telephone=no"/>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width;" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Scandit SDK</title>
</head>
<body onload="onBodyLoad()" style="background: url(img/ScanditSDKDemo-Splash.png) no-repeat;background-size: 100%;background-color: #000000">
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
function onBodyLoad()
{
document.addEventListener("deviceready", onDeviceReady, false);
}
function success(resultArray) {
alert("Scanned " + resultArray[0] + " code: " + resultArray[1]);
// NOTE: Scandit SDK Phonegap Plugin Versions 1.* for iOS report
// the scanning result as a concatenated string.
// Starting with version 2.0.0, the Scandit SDK Phonegap
// Plugin for iOS reports the result as an array
// identical to the way the Scandit SDK plugin for Android reports results.
// If you are running the Scandit SDK Phonegap Plugin Version 1.* for iOS,
// use the following approach to generate a result array from the string result returned:
// resultArray = result.split("|");
}
function failure(error) {
alert("Failed: " + error);
}
function scan() {
// See below for all available options.
cordova.exec(success, failure, "ScanditSDK", "scan",
["ENTER YOUR APP KEY HERE",
{"beep": true,
"1DScanning" : true,
"2DScanning" : true}]);
}
app.initialize();
</script>
<div align="center" valign="center">
<input type="button" value="scan" onclick="scan()" style="margin-top: 230px; width: 100px; height: 30px; font-size: 1em"/>
</div>
</body>
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'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