I'm making an application using jQuery Mobile and Phonegap Build. The jQuery Mobile javascript code works fine, however the phonegap javascript code doesn't seems to be working. The application it's using a multiple html template, and I made the login the index file of the application.
I'm using phonegap version 3.1.0 (current default for build service)
I'm adding the following lines in the config.xml file:
<gap:plugin name="org.apache.cordova.device" />
<gap:plugin name="org.apache.cordova.file" />
Then, at index.html, I'm adding the following scripts at the header:
<script src="phonegap.js"></script>
<script src="js/settings_page.js"></script>
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/jquery-mobile-events.js"></script>
<script src="js/jquery.mobile-1.4.1.min.js"></script>
The settings_page file includes some basic phonegap API interaction, which writes some default values in local storage in case they're not set:
console.log('added');
document.addEventListener('deviceready', deviceReady, false);
function deviceReady() {
console.log('called');
var application_settings = window.localStorage;
//if no settings have been created, create them
if (application_settings('defaults') === null) {
application_settings.setItem('defaults', 'true');
application_settings.setItem('type', 'all');
application_settings.setItem('sport', 'all');
application_settings.setItem('customer', 'all');
application_settings.setItem('order', 'date');
application_settings.setItem('refresh', 'never');
console.log('defaults set');
}
}
Using ripple emulator I can see the 'added' comment in the console log, however never reaches the 'called' one, and if I run the application and use weinre to debug it, none of the console logs registers.
In both cases none of the keys are being generated, but I'm not getting any errors either, am I missing something? I changed the features to plugins as suggested in here PhoneGap 3.1 Build Device Is Not Defined and here http://www.raymondcamden.com/index.cfm/2013/10/1/PhoneGap-Build-and-PhoneGap-30 but it's still not working, any help is highly appreciated
You need to run on your actual device or simulator. Run on ripple chrome extension won't help you.
Adding following line help me... I have done all tries but nothing helped me so finally I went through http://docs.build.phonegap.com/en_US/#googtrans(en) Configurations block..
<plugin name="cordova-plugin-whitelist" version="1"/>
<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>
Ok after hours of debugging and testing I solved the issue, I think this can be helpful for future references to any other phonegap build users so I'm gonna list step by step guide on what I did in here. I don't know if this is the best approach though, so I'd really appreciate some feedback on things that can be improved :)
To make jQuery work with Phonegap Build and Phonegap API you need to do the following in your application's index:
Please note the API calls won't run in the emulator, you need a real device to check this out. (Thanks #Dato' Mohammad Nurdin for this valuable information)
Add a reference to the phonegap script <script src="phonegap.js"></script> ideally this can be your first script reference, it doesn't requires any library to work and you don't need to have the library itself, phonegap build will add it once it compiles the code.
Add jQuery reference (in case you need it, since I was working with jQuery Mobile I'll need it)
Device ready will take place in your index file when you'll next add the event listener, adding this in other scripts will cause some issues with the device ready event. But if you need to check the device ready status in other scripts, you can add a global variable available for all of the scripts bellow, if you don't know how you can create a script with a variable, this will make it available for all the scripts referenced after this one. Example: <script>var phonegap_ready = false</script>
add a script with your event listener
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
phonegap_ready = true;
}
Add the source of jQuery Mobile and your js events and code files.
As a side note, checking for device ready while working with jQuery Mobile it's just a standard, after some test I ran, phonegap device ready fires way more faster than jQuery pageshow event (which makes sense considering all of the DOM manipulation jqm page events do) however I still recommend it just as a caution.
Once in your code you can use the deffered call $.when() to check asynchronously to not execute the phonegap calls until the phonegap framework is fully operational. As an example using the previously global variable created:
$(document).on('pageshow', '#login_page', function (parent_event) {
//do jQuery Mobile event handlings here
$.when(phonegap_ready === true).then(function () {
phonegapApiFunctionsCall();
});
});
If the features or plugins (calls to phonegap API are performed as features before Phonegap Build 3.0, and as of Phonegap Build 3.0 these were replaced for plugins) you'll be able to run the API commands from the phonegapApiFunctionsCall() and will avoid the initialization issues between phonegap deviceready event and jQuery Mobile page initialization events.
Related
I'm using Cordova 7.0.1, and trying to set the contents of an iframe using a generated blob: url, but the result is an empty iframe, and no console errors.
If I disable blob: urls in the content security policy, I get an error as I would expect. So I'm fairly confident my problem is not the CSP.
I've also whitelisted * in config.xml to no avail:
<allow-navigation href="*" />
<allow-intent href="*" />
Constructing a data: url works. Why doesn't blob:?
Ages ago, probably with Cordova 5, I had this working. Is this no longer permitted? Is there a way to allow it again, or an alternative method?
To allow blob scheme, we have to set the following in config.xml:
<allow-navigation href="blob:*" />
More info on this is available on Issue:CB9558 under official apache cordova issue tracker.
I have tried this method and it is working perfevtly in Android but not in IOS
Call
And in my config.xml file
<access origin="tel:*" launch-external="yes" />
the above method is tested in real devices and it is working only for android, is there any other method to make it work in IOS
This method worked for me in IOS
<div onclick="window.open('tel:7795713372', '_system', 'location=yes')">Call me</div>
Also you need to install cordova inapp browser plugin. And need to whitelist the request in config.xml by adding whitelist plugin.
Use below code to make it work
Call me
For your code to work on IOS you need to add in the config.xml
<allow-navigation href="tel:*" />
Doing this breaks the functionality on android so make sure to add it inside
<platform name="ios">
To work on IOS you need to add in the config.xml
in .js
window.open('tel:' + number, '_system');
I have an application which runs well on chrome browser and on (genymotion) emulator.
However, if i run it on my smartphone, each request to server (post, get, put) gives the result : Failed to load resource: net::ERR_CONNECTION_TIMED_OUT
My settings:
Cordova: 5.2.0
config.xml:
<content src="index.html" />
<access origin="*" />
<allow-navigation href="*" />
<allow-intent href="*" />
jquery:
$.support.cors=true;
my request: (i've done the same also with backbone, the same result)
$scope.loginRequestObject = $scope.getLoginObject();
$.ajax({
url : $scope.baseUrl + "/myTable",
type : 'post',
contentType : 'application/json; charset=utf-8',
scriptCharset : "utf-8",
data : JSON.stringify($scope.loginRequestObject),
dataType : 'json',
fail : function(a,b,c){
console.log(a);
console.log(b);
console.log(c);
},
success: function(a,b,c){
console.log(a);
console.log(b);
console.log(c);
});
I've runned my app by both exporting and running (cordova run android) and my phone has a wireless connection.
#Asqan,
you have made a common mistake which is listed in Top Mistakes by Developers new to Cordova/Phonegap. In this instance, you need to add the white-list plugin, and CSPto your webpage.
The alternative is this quick fix – but know that this fix removes all needs for white-list. This creates a security issue which you may not want to by pass.
QUICK FIX Add this to your config.xml
<preference name="phonegap-version" value="3.7.0" />
The long answer is as such:
From Top Mistakes by Developers new to Cordova/Phonegap you have hit:
#6 Not setting the "phonegap version" for your compiler
#7 Not setting "version" for you plugins
#10 Not adding the new "white-list" and "white-list plugin" parameters in config.xml.
For #6 & #7
With the CLI version, if you do not assign a version for your platform OR in ''Phonegap Build'' if you do not set the phonegap-version in config.xml, YOU WILL GET THE LATEST VERSION. If you are lucky, your program just works as expected. If you are not lucky, you'll get a set of cascading errors.
Luckily for all of us, Holly Schinsky has written a nice blog post to explain it all:
Cordova/PhoneGap Version Confusion
http://devgirl.org/2014/11/07/cordovaphonegap-version-confusion/
For #10
This relatively * NEW * requirement means – to access ANY website or resources on the web, you MUST use the whitelist and the whitelist plugin. This requirement goes into affect, if you are using cordova-android#4.0.0 or better; including cli-5.1.1. If however, your version is before 4.0.0, let's say 3.5.0 or 3.7.0, then you will not have to add the white-list requirement.
To be clear, the "whitelist" has been around for a bit, but the plugin and requirement is very new. As you would expect, when the "whitelist" was added, the defacto open-access feature was deprecated. Or said another way, the defacto open-access feature was planned and scheduled to be eliminated. This change marks a step in removal of the open-access feature.
In addition, the Content Security Policy (CSP) has caught numerous developers - because it was soooo poorly publicized. Depending on your use and the version of Phonegap you are using, the CSP needs to go in every single HTML page you used, just like you have to wait for 'deviceready'. However, there are cases where it is not needed at all. The documentation is confusing for some, please read it carefully. The documentation is buried in the bottom of many of the latest documentation pages.
Related Links
Phonegap Build Forum: Notes for upgrading to cli-5.1.1 on PGB and now required Whitelist
Cordova Whitelist Guide
Phonegap Whitelist Guide
Phonegap Build Whitelist Guide
This is driving me crazy. I'm working on a Ionic app (Cordova, Angular etc). I have a contact us link which contains a mailto: href
href="mailto:info#somedomain.net?subject=my%20App"
I've read countless posts on SO that say you have to remove
<access origin="*"/>
from the config.xml in the project root and replace it with:
<access origin="mailto:*" launch-external="true" />
Which I've done. When I run ionic build it gets added to the config.xml in platforms/android/res/xml. But no matter what I do the link doesn't open the mail app on any Android simulator (even when email is configured in the simulator).
Sadly I don't have a device to test on - so is this just a emulator thing or am I missing something?
You must install the cordova plugin whitelist:
cordova plugin add cordova-plugin-whitelist
or if you want to save the reference to your config.xml file:
cordova plugin add cordova-plugin-whitelist --save
and that you have to add the intent to your config.xml file:
<allow-intent href="mailto:*" />
You can find more info here.
Try this:
window.location.href = "mailto:your#ema.il?subject=Works on iOS too";
I just solved this thanks to the responses & articles above. I'm not sure what has or hasn't changed since the above postings, but for the reference of others; I now have http://, https://, tel:, & mailto: working with only the inappbrowser plugin installed and no manual edits to config.xml needed. I did everything mentioned above & it still wasn't working, so I started fiddling and found that I the window.open() call requires the second parameter of "_system" to work correctly (it tried to use the browser and "navigate" to http://mailto:xxx... without the "_system" flag).
However, for curiousity's sake, I uninstalled the whitelist plugin and removed the manual edits in config.xml and it still works.
Notes:
-I don't remember all the variations I tried, but onclick couldn't access the Ionic/Angular/Cordova scope(s), so I stuck with ng-click.
-I did not / have not tried using href="..." with any of the options.
(If I remember, I'll test them and update this to reflec my results.)
So, with only the cordova-plugin-inappbrowser installed and no config.xml edits, here are my working / tested solutions:
ng-click="window.open('http://somesite.com', '_system')"
ng-click="window.open('https://google.com', '_system')"
ng-click="window.open('tel:(123) 345-4567')"
ng-click="window.open('mailto:email#example.com', '_system')"
Tested 9/20/2016 Using:
HTC One M8, android 6 ,cordova v6.3.1, cordova-plugin-inappbrowser v1.5.0, ionic v2.0.0, jdk1.8.0_101, android SDKs 21, 23, & 24 installed
what if you replace "true" with "yes"... I use this in my app and it works.
<access origin="tel:*" launch-external="yes"/>
Ran into this today and noticed something that affected mailto, but not tel, links:
In addition to adding the intent to the cordova config as described by dave's answer
<allow-intent href="mailto:*" />
I also had to allow mailto links in the csp header of my page
<meta http-equiv="Content-Security-Policy" content="default-src 'self' mailto:*">
Didn't see any documentation around this behaviour of CSP headers.
Just in addition to use Cordova's WhiteListPlugin ;
It worked for me in this way:
in config.xml
<access origin="*"/>
<access origin="mailto:*" launch-external="true" />
<allow-intent href="mailto:*" launch-external="yes"/>
And specially for ios add :
<platform name="ios">
<allow-navigation href="mailto:*" launch-external="yes"/>
...
<platform name="ios">
Altering Cordova's WhiteListPlugin in config.xml did not work for me -- <access >,`. I tried many combinations, including those above. Doesn't mean these won't work necessarily, just for my setup it doesn't. (Building for Browser, Android, and iOS)
However, using the Cordova InAppBrowser Plugin worked:
As mentioned above, use the inAppBrowser plugin and set the target to _system.
This by passes the issues I was seeing in iOS with unsupported url, and launches the native systems web browser (i.e., Does not rely on WhiteListPlugin to allow the URL call).
Hope this helps.
Cordova version 6.3.1.
I recently upgraded to Cordova 5.0 (and Cordova Android 4.0) and, since then, my app can no longer access external resources.
I still have <access origin="*" /> in config.xml (as before), and I still have <uses-permission android:name="android.permission.INTERNET" /> in AndroidManifest.xml (as before), but ajax calls are rejected with no explanation (the "textStatus" param is "error", the "errorThrown" param is null, and xhr.state() returns "rejected").
I've verified that no request is hitting the server, so it appears it is being stopped by Android, but the log doesn't give any explanation as to why...
I can access the URL in question fine from the Android browser, just not from the app.
The ajax request is made via a call to Backbone.sync() of Backbone.js, which ultimately calls jquery's $.ajax(). I haven't changed anything about how the call is made... just upgraded cordova.
Are there new requirements/setup for network requests, in Cordova 5.0, or anything I need to do differently from previous Cordova versions?
Does anyone know of a way I can get more information as to why Android and/or Cordova is rejecting the request?
I tracked the culprit down to the android#4.0.0 cordova platform. It now requires the new cordova-plugin-whitelist plugin.
It can be installed with
cordova plugin add cordova-plugin-whitelist
or by adding
<plugin name="cordova-plugin-whitelist" spec="1" />
to config.xml, and then it is configured with
<allow-navigation href="*" />
in place of the old, <access origin="*" /> tag.
It's a little annoying that the log doesn't spit out the "whitelist rejection" error messages anymore when a problem like this comes up (that would have saved me a ton a time), but maybe that'll come later.
In Cordova 6.X you need to remove the builtin whitelist plugin and reinstall the new version of plugin.
cordova plugin remove cordova-plugin-whitelist
and re install the plugin
cordova plugin add cordova-plugin-whitelist
and then replace <allow-navigation href="*" /> to config.xml file instead of <access origin="*" />
in my case this trick worked.
Two things
Ensure the ajax url you are using allows cross origin requests
Are you passing relevant headers while making cross origin requests
To Read
http://enable-cors.org/
How to enable CORS in AngularJs
http://backbonetutorials.com/cross-domain-sessions/
if you are using cordova 6.x.x u need to uninstall builtin cordova-plugin-whitelist using
cordova plugin remove cordova-plugin-whitelist
and reinstall it by using
cordova plugin add cordova-plugin-whitelist
even if the issue persists relaunch command prompt and try it.
For me it started working after I removed from html file mata tag:
<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 *">