window.open in PhoneGap app on iOS: This app is not allowed to query for scheme file

I have a hybrid app developed with DevExpress and PhoneGap.

I try to open a local jpeg image via

window.open('file:///var/mobile/Containers/Data/.../image.jpg', '_system');

but it does not work (anymore) on iPhone and iPad (latest iOS 9 version), failing with the error error: "This app is not allowed to query for scheme file".

(The app downloaded the image beforehand via the Phonegap method FileTransfer.download to the folder that it got via window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, ...) method.)

It works fine on Android, and it worked fine on iPhone as well a few weeks ago. I think it might be related to the PhoneGap update due to an update of DevExtreme.

Before, I used PhoneGap 3.7.0, now I use cli-5.2.0.

I already found this question (https://www.devexpress.com/Support/Center/Question/Details/Q486439), which is similar, but it's already 2 years old and does not seem to solve my questions.

Using GapDebug, I see this in the log:

<Warning>: THREAD WARNING: ['InAppBrowser'] took '38.211914' ms. Plugin should use a background thread.
<Warning>: THREAD WARNING: ['File'] took '26.509033' ms. Plugin should use a background thread.
<Warning>: -canOpenURL: failed for URL: "file:///var/mobile/Containers/Data/Application/9425CCB6-77F7-4337-B37C-7DB577C2F6B4/Documents/myDocuments/a96e7238-a502-49e6-bcd3-186937afc3cb/camera_1458208164206.jpg" - error: "This app is not allowed to query for scheme file"

It's some kind of permission problem, but what to add to the config.xml?

This is my config.xml:

<widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" id="com.devexpress.apptemplate" version="1.0" versionCode="1">
  <name>ApplicationTemplate</name>
  <preference name="phonegap-version" value="cli-5.2.0" />
  <preference name="permissions" value="none" />
  <preference name="prerendered-icon" value="true" />
  <preference name="android-windowSoftInputMode" value="adjustResize" />
  <preference name="SplashScreen" value="splash" />
  <preference name="SplashScreenDelay" value="60000" />
  <preference name="AutoHideSplashScreen" value="false" />
  <preference name="DisallowOverscroll" value="true" />
  <preference name="StatusBarOverlaysWebView" value="false" />
  <preference name="StatusBarBackgroundColor" value="#000000" />
  <preference name="KeyboardDisplayRequiresUserAction" value="false" />
  <feature name="http://api.phonegap.com/1.0/network" />
  <gap:plugin name="com.devexpress.plugins.devextremeaddon" version="1.0.1" />
  <gap:plugin name="cordova-plugin-ios-longpress-fix" version="1.1.0" source="npm" />
  <gap:plugin name="org.apache.cordova.camera" version="0.3.6" />
  <gap:plugin name="org.apache.cordova.file" version="1.3.3" />
  <gap:plugin name="org.apache.cordova.file-transfer" version="0.5.0" />
  <gap:plugin name="org.apache.cordova.inappbrowser" version="0.6.0" />
  <gap:plugin name="org.apache.cordova.media-capture" version="0.3.6" />
  <gap:plugin name="org.apache.cordova.media" version="0.2.16" />
  <gap:plugin name="org.apache.cordova.network-information" version="0.2.15" />
  <gap:plugin name="cordova-plugin-statusbar" version="2.1.0" source="npm" onload="true" />
  <gap:plugin name="org.apache.cordova.splashscreen" version="1.0.0" onload="true" />
  <access origin="*" subdomains="true"/>
  <gap:plugin name="cordova-plugin-whitelist" source="npm"/>
  <allow-navigation href="*" />
  <allow-intent href="*" />
</widget>

I even added the two lines

  <allow-navigation href="*" />
  <allow-intent href="*" />

according to https://github.com/apache/cordova-plugin-whitelist and it does not help.

I saw that Ionic, another hybrid framework, also mentions in their docs http://docs.ionic.io/docs/cordova-whitelist that there might be permission problems with newer Phonegap versions, such as the CLI versions, and that the above <allow-navigation href="*" /> should be used - however it does not seem to help in my case.

=== Update ===

I created two tickets on Phonegap's & Cordova's github:

=== Update 2 ===

As suggest below, I am now using https://github.com/pwlin/cordova-plugin-file-opener2 instead, which works fine.

Solution

I was facing the same problem... I started using cordova-plugin-file-opener2 (github.com/pwlin/cordova-plugin-file-opener2) to avoid the problem.

To solve the problem with white spaces I removed them from the targetPath:

targetPath = targetPath.replace(/ /g,'')

So my download/open code is like that:

$cordovaFileTransfer.download(url, targetPath, options, trustHosts)
  .then(function(result) {
    $cordovaFileOpener2.open(targetPath, mimeType)
  })