Develop Reference

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.

Android Webview gives net::ERR_CACHE_MISS message

I built a web app and wants to create an android app that has a webview that shows my web app. After following the instructions from Google Developer to create an app, I successfully installed it on my phone with Android 5.1.1.
However, when I run the app for the first time, the webview shows the message:
Web page not available
The Web page at [Lorem Ipsum URL] could not be loaded as:
net::ERR_CACHE_MISS

I solved the problem by changing my AndroidManifest.xml.
old : <uses-permission android:name="android.permission.internet"/>
new: <uses-permission android:name="android.permission.INTERNET"/>

Answers assembled! I wanted to just combine all the answers into one comprehensive one.
1. Check if <uses-permission android:name="android.permission.INTERNET" /> is present in manifest.xml. Make sure that it is nested under <manifest> and not <application>. Thanks to sajid45 and Liyanis Velazquez
2. Ensure that you are using <uses-permission android:name="android.permission.INTERNET"/> instead of the deprecated <uses-permission android:name="android.permission.internet"/>. Much thanks to alan_shi and creos.
3. If minimum version is below KK, check that you have
if (18 < Build.VERSION.SDK_INT ){
//18 = JellyBean MR2, KITKAT=19
mWeb.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
}
or
if (Build.VERSION.SDK_INT >= 19) {
mWebView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
}
because proper webview is only added in KK (SDK 19). Thanks to Devavrata, Mike ChanSeong Kim and Liyanis Velazquez
4. Ensure that you don't have webView.getSettings().setBlockNetworkLoads (false);. Thanks to TechNikh for pointing this out.
5. If all else fails, make sure that your Android Studio, Android SDK and the emulator image (if you are using one) is updated. And if you are still meeting the problem, just open a new question and make a comment below to your URL.

For anything related to the internet, your app must have the internet permission in ManifestFile. I solved this issue by adding permission in AndroidManifest.xml
<uses-permission android:name="android.permission.INTERNET" />

I tried above solution, but the following code help me to close this issue.
if (18 < Build.VERSION.SDK_INT ){
//18 = JellyBean MR2, KITKAT=19
mWeb.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
}

Use
if (Build.VERSION.SDK_INT >= 19) {
mWebView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
}
It should solve the error.

Also make sure your code doesn't have true for setBlockNetworkLoads
webView.getSettings().setBlockNetworkLoads (false);

I ran to a similar problem and that was just because of the extra spaces:
<uses-permission android:name="android.permission.INTERNET "/>
which when removed works fine:
<uses-permission android:name="android.permission.INTERNET"/>

PhoneGap and WhatsApp

I hope you'll can help me to find an issue to my problem.
I'm developping an application who should use WhatsApp. This application is using HTML5, CSS3 and Javascript. I am using this link to send an message with WhatsApp :
<a href="whatsapp://send?text=Test 1">
This link work perfectly when you use directly a browser but when I use PhoneGap I have a error like this :
net::ERR_UNKNOWN_URL_SCHEME
I have tested some issues but doesn't work. I have also checked the Documentation but nothing...
Can you help me please ?
Thanks
EDIT
Here is the solution to my problem (thanks to #jcesarmobile):
<access origin="whatsapp:*" launch-external="yes" />
Many thanks :)

Edit for newer cordova versions:
Use <allow-intent href="whatsapp:*" />
Old answer:
Add this line to your config.xml
<access origin="whatsapp:*" launch-external="yes" />
Or use the social sharing plugin
https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin
<button onclick="window.plugins.socialsharing.shareViaWhatsApp('Message via WhatsApp', null /* img */, null /* url */, function() {console.log('share ok')}, function(errormsg){alert(errormsg)})">msg via WhatsApp (with errcallback)</button>

First and more important, add this line to your config.xml
<allow-intent href="whatsapp:*" />
after use the code:
Hello, world!

window.location.href = 'whatsapp://send?text=hello world';
this worked for phonegap IOS
window.open("'whatsapp://send?text=hello world'", "_system");
for android.

Phonegap - Can't get Camera to come up at all

I've read every question both here and on Google and can't for the life of me figure this one out. I'm simply trying to use Phonegap to take a picture and store the URI. I'm trying to use the example from the docs here. Here's the snippet where I'm trying to open the camera.
this.getPicture = function() {
navigator.camera.getPicture(self.onBackSuccess, self.onFail, {
quality: 20,
destinationType: Camera.DestinationType.FILE_URI
});
};
What I've already checked/verified
Phonegap/Cordova itself is installed and working fine. I can build my app with no problems.
navigator.camera above is definitely defined. I can follow the code down and the "getPicture" function is being called, but that doesn't pull up the Camera, either on the device, ADB emulator, or Ripple browser emulator.
Neither my success nor my error callback are ever being called. However, when I look at those variables in the getPicture function, I can see the appropriate function stored in those variables.
I have installed the Phonegap camera plugin. When I run phonegap local plugin list, one of the results is org.apache.cordova.camera 0.3.4 "Camera"
My config.xml file contains both the lines <feature name="http://api.phonegap.com/1.0/camera"/> and <gap:plugin name="org.apache.cordova.camera" />. Not sure if that's relevant, since the plugin is already installed.
My AndroidManifest.xml file contains the lines <uses-permission android:name="android.permission.CAMERA" />, <uses-feature android:name="android.hardware.camera" />, and <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />.
When I click on the button that calls this function, it prints out this:
[20,1,1,-1,-1,0,0,false,false,false,null,0]
which is the array of cameraOptions that gets generated/used by the camera.getPicture function.
Everything I've been able to find just takes for granted the fact that calling navigator.camera.getPicture(success, failure, options); is going to open the camera, so there doesn't seem to be much info on solving my particular problem. Any pointers here would be much appreciated.
Edit: I am seeing an error in the console that looks like it may be related:
Could not find cordova.js script tag. Plugin loading may fail.
Edit: I don't think my last edit is relevant. That has to do with the loading of the plugin files themselves, and I can see the Camera.js file in the plugins folder when I load my app. I can put a breakpoint in the cameraExport.getPhoto function and it does go in there. Then it calls
exec(successCallback, errorCallback, "Camera", "takePicture", args);
which prints out the array I mentioned before and does nothing else.

without seeing all of your code, my guess is that the use of this. and self. is causing the issue. Try something like this:
function getPicture() {
navigator.camera.getPicture(onBackSuccess, onFail, {
quality: 20,
destinationType: Camera.DestinationType.FILE_URI
});
};
function onBackSuccess() {
//some code
}
function onFail() {
//some code
}

Passing in false to setBlockNetworkLoads() crashes my android app

What is the requirement to make use of this:
mMessageContentView = (WebView) findViewById(R.id.message_content);
mMessageContentView.getSettings().setBlockNetworkLoads(false);
Everytime I set setBlockNetworkLoads to false. My application crashes! If I set it to true, it works fine but my application can't load images over the network.
Is there something I need to do before hand before I can set it to false?

As correctly pointed out by Gallal - I should of made use of the logs. A quick command on dos:
adb logcat
Showed that my application was missing the internet permission in the manifest file. So adding the following to my android manifest solved my problem:
<uses-permission android:name="android.permission.INTERNET" />