Develop Reference

Cordova Android 10 - Trouble to assign the root path

As breautek wonderfully explain here , with Android 10 Platform (the mximum platform available at the moment on Cordova and the minimum platform required to publish on playstore) "XHR not CORS request" and "file://" not working if I don't set on my config.xml
<preference name="hostname" value="localhost" />
<preference name="AndroidInsecureFileModeEnabled" value="true" />
I'm pretty sure that this solution is useful... but temporary. I'm sure the PlayStore will impose a new restriction shortly and this solution will be in vain.
So I decided to not use them and carry on... I have solved my problem about XHR CORS request but I have no solution about how to set the root path... for example to assign it an image path
At the moment I get it as:
var urlRootMobile=cordova.file.applicationDirectory+'www/';
var img1 = urlRootMobile."/img/1.png";
var img2 = urlRootMobile."/img/2.png";
var img3 = urlRootMobile."/img/3.png";
Obviously don't work on my app because the path is : " file:///android_asset/www/img/1.png"
I tried to use "https://localhost/www"
I tried to use "https://localhost"
I tried to use "/"
But nothing...
I there some other command or trick ???

You need to use cordova-plugin-file to read these files.
If you just need to read images from www then the path is simply '/img/1.png'

Show Decimal Keyboard in ReactJS for iOS

My application is ReactJS. I am using WKWebview on iOS.
I am using number format react-number-format for input.
This component not supported(type="number"). You can use only "text,tel,password" type.
<input type="number" pattern="[0-9]*"/> I can't use this.
So, I wrote the following code.
<NumberFormat id="numberFormat" decimalSeparator="," thousandSeparator="." inputMode="decimal" pattern="[0-9]*" .../>
Android device screenshot:
Its correct for me.
IOS device screenshot:
Its wrong for me.
I want to see ",(comma)" on the keyboard(decimal pad)
Kindly review and give feedback.

I solved my problem by adding the following line of code.
<NumberFormat id="numberFormat" decimalSeparator="," thousandSeparator="." inputMode="decimal" pattern="[0-9],*" .../>
But IOS Safari supporting version 12.2 or higher on inputMode="decimal" .
Thanks.

ngCordova cdvfile URLs and ng-src not rendering image

I've been struggling with this for days now. I have an Ionic 1.3.0 application using ngCordova#0.1.26-alpha
I am using $cordovaFile.writeFile() to store images in cordova.file.applicationStorageDirectory. I've tried every storage location with the same result. The file is good, I can view it in a file manager app. I would like to use the file as an ng-src for an <img>. On Android, this might look something like: cdvfile://localhost/sdcard/Android/data/com.example.mobile/img-49444.jpg
So in my page, I bind the URL to the <img> and stick a sanity check <pre> in there to see that record.image_url has a valid URL:
<img ng-src="{{record.image_url}}">
<pre>{{record.image_url}}</pre>
While the URL looks good to me, the image simply doesn't render and it seems no amount of effort will convince it. I've tried file:///, cdvfile://, and http:// URLs, using entry.toURL(), entry.toInternalURL(), etc., from the response objects from $cordovaFile.writeFile(). All approaches fail with either a broken image icon or an empty <img> element rendering.
I've tried adding this CSP tag to index.html (and dozens of other attempts)
<meta http-equiv="Content-Security-Policy" content="img-src 'self' data: blob: filesystem: cdvfile://*;">
And I've tried messing around with $compileProvider, like:
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|cdvfile):|data:image\//);
And throwing everything I can at config.xml Cordova whitelists
<plugin name="cordova-plugin-whitelist" spec="~1.2.1">
<access origin="*"/>
<access origin="cdvfile://*"/>
<access origin="file://*"/>
<access origin="file:///*"/>
<allow-intent href="cdvfile://*"/>
<allow-intent href="file://*"/>
<allow-intent href="file:///*"/>
<allow-navigation href="cdvfile://*"/>
<allow-navigation href="file://*"/>
<allow-navigation href="file:///*"/>
</plugin>
Nothing works. I don't think this is a white list plugin issue - my assumption is that when the image is rejected due to the white list, the image is displayed as a broken link, whereas the <img> element is instead empty and takes up no space when the white list is not rejecting it. This behavior is consistent on Android 4.4.4 and 6.0.1.
Any help would be greatly appreciated.

So as to not mislead others that come across this answer, I managed to get cdvfile:// URLs to work even in livereload mode without issue in a new app. Simply:
config.xml
<access origin="*"/>
<access origin="tel:*" launch-external="yes"/>
<access origin="geo:*" launch-external="yes"/>
<access origin="mailto:*" launch-external="yes"/>
<access origin="sms:*" launch-external="yes"/>
<access origin="market:*" launch-external="yes"/>
<access origin="cdvfile:*"/>
<plugin name="cordova-plugin-whitelist" spec="~1.2.2"/>
Note that <access> rules are NOT supposed to be nested under <plugin>. The documentation doesn't explicitly call that out.
app.js
.config(function ($stateProvider, $urlRouterProvider, $compileProvider) {
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|file|blob|cdvfile|content|tel|geo|mailto|sms|market):|data:image\//);
I do not have a Content-Security-Policy meta tag declared in index.html
And all is well.

So it turns out I can use file:///* paths for ng-src if I deploy the built .apk to the device instead of using the Ionic livereload server (ionic run android -cls). It should be obvious that hardware-level functions won't work through something like the browser-based ionic serve, but it was less obvious that testing on actual hardware would fail like this based on the livereload server. I incorrectly assumed that the livereload server was just a file monitoring approach where it would stream assets onto the device as they change and maybe notify the app to reload. Instead it seems they are just hosting a web server directly on your host. $cordovaFile correctly reads/write files on the device even in livereload, but the web views in the app don't have native access to the files on the device in that mode. I could read the file contents with $cordovaFile.readAsText() and that would still work even on livereload, but when it comes to the web views in the app reaching files, well, it just doesn't have any access to native device URLs.
If anyone else runs into this issue, here's how I'm writing the file and capturing the URL so that it works in a view.
$ionicPlatform.ready(function () {
var targetDir = cordova.file.externalApplicationStorageDirectory + "files/";
$cordovaFile.writeFile(targetDir, name, imageData, true)
.then(function (info) {
console.log("File created", info.target.localURL, JSON.stringify(info));
$cordovaFile.checkFile(targetDir, name).then(function (entry) {
console.log("Got file entry", entry.toURL());
q.resolve(entry.toURL());
});
}, function (e) {
q.reject(e);
});
});
return q.promise;
}
On android this would return a URL like:
file:///storage/emulated/0/Android/data/com.example/files/<name>
I've found that cordova-plugin-whitelist can be empty in config.xml - we don't need any whitelist directives for file:///. Also, no $compileProvider.imgSrcSanitizationWhitelist() changes are necessary - the default whitelist should work.
I never did get cdvfile:// URLs to work, regardless of whitelist settings, Content-Security-Policy directives, or app.config tweaks.

$.get not working with phonegap cordovaExample

I have a problem with phonegap and $.get (jQuery). It's actually only a webapp which exists already but I want to bring it on my Android Smartphone.
So my $.get is working and I have this settings:
In res/xml/config.xml:
<access origin="*"/>
In AndroidManifest.xml:
<uses-permission android:name="android.permission.INTERNET" />
But it's not working :(
Edit 1 (17.11.2013 15:23):
alert("getData: "+searchTerm+" in "+language);
$.get("http://mysite.de/search.php", {art: searchTerm, lang: language}).done(function(data){
alert("daten: "+data);
}, "html");
alert("ready");
Only the first and the third alert is working.

The problem is
XMLHttpRequest cannot load http://mysite.de/search.php. Origin http://localhost is not allowed by Access-Control-Allow-Origin.
You need to allow access to http://mysite.de/search.php from any domain
Allow it by adding code to your php page:
header("Access-Control-Allow-Origin: *");

Displaying leadbolt ads on a phonegap android app

I’ve been trying without success to get leadbolt ads to show up on an android app I created using phonegap. This is what I’ve done so far:
I have created a notification ad on leadbolt.com, added references to LeadboltController.jar and LeadboltPhonegapPlugin.jar files contained in my projects libs folder.
Added the code below to my javascript file
var Leadbolt = function() { }
Leadbolt.prototype.load = function(data, successCallback, failureCallback) {
return PhoneGap.exec(successCallback, failureCallback, 'LeadboltPlugin', data[0], data);
};
PhoneGap.addConstructor(function() {
PhoneGap.addPlugin('leadbolt', new Leadbolt());
PluginManager.addService("LeadboltPlugin", "com.LeadboltPlugin.LeadboltPlugin");
});
Sometimes I insert the code below in my javascript file or index.html, either way I see no ads.
window.plugins.leadbolt.load(["*********"], null, null);
Am sure people must have gotten this to work on their apps. I would really appreciate any assistance offered.
Thanks alot.

Have you done this:
Open /res/xml/plugins.xml, add following lines:
<plugin name="LeadboltPlugin" value="com.LeadboltPlugin.LeadboltPlugin" />
<plugin name="LeadboltNotificationPlugin" value="com.LeadboltPlugin.LeadboltNotificationPlugin" />

Hey not sure if this helps, but I know Leadbolt released an update to their phonegap plugin and its available in the portal. They put all ads types in one plugin which is much more convenient to use. Have you tried that?
If still not working, you should write to their support with details and they will get an answer for you. I’ve done that and its been very helpful.