Cordova iOS: Failed to load resource: The requested URL was not found on this server

Question

EDIT: While i was trying the same solutions that I already tried, I got it working with "cordova.file.documentsDirectory", it must be something that I missed last week

ORIGINAL QUESTION:

I'm building a Leaflet map app in Cordova 9.0.0 that needs to be able to download, unzip, delete unzip file and then access images from unzipped directory on mobile device for offline use.

I'm using Cordova File, FileTransfer and Zip plugins and application works as expected on the Android device, but not on iOS(using cordova platform iOS 6.2.0).

I've tested it on iPhone 5s(iOS 12.5.4) device, iPhone 8(iOS 14.5) simulator, iPhone 11(iOS 14.5) simulator in Xcode and I can successfully download, unzip, delete zip file and then access map tiles through cordova.file.tempDirectory+"name_of_unziped_directory/" or cordova.file.applicationStorageDirectory+'Documents/name_of_unziped_directory/'(documentsDirectory) or cordova.file.documentsDirectory+'name_of_unziped_directory/' while offline, but when it comes to testing it on iPhone 11(iOS 14.7.1) device I can download, unzip and delete the file but cannot access map tiles and I get error:

Failed to load resource: The requested URL file:///private/var/mobile/Containers/Data/Application/<uuid>/tmp/unzip_directory/zoom/x_coord/y_coord/image.png was not found on this server

I'm trying to access map tiles like this(in this case we are accessing through documentsDirectory, but It gives the same results if I change the path as I mentioned above):

 var mymap = L.map('mapid1').setView(coords, zoom);
 L.tileLayer(cordova.file.documentsDirectory + 'unzipped_directory/{z}/{x}/{y}.png', {
   attribution: 'Tiles © Esri',
   maxZoom: 16,
   minZoom: 5,
   trackResize: false,
 }).addTo(mymap);

I've read about similar problems here on stack overflow and tried all kind of solutions that I saw but no success.

What I've tried:

• I tried to change from tempDirectory or applicationStorageDirectory+'Documents/'(documentsDirectory) to every directory that's listed in Cordova File Plugin official docs, but nothing changes.

• Tried with changing the path with 'file:///', without 'file:' but with 3 slashes '///', with only one slash '/', without slashes, but I think that it doesn't make much of a difference because I always get the same error message Failed to load resource: The requested URL file:///private/var/mobile/Containers/Data/Application/<uuid>/tmp/unzip_directory/zoom/x_coord/y_coord/image.png was not found on this server

• Tried with "cdvfile://" and "file://" and converting it with window.WkWebView.convertFilePath([your file path]);

• Tried with installing cordova-plugin-uiwebview-engine because it allows accessing files outside of application if I understood correctly

• Tried with creating a scheme, example:

<platform name="ios">
    <preference name="scheme" value="app" />
    <preference name="hostname" value="localhost" />
</platform>

without success.

• My access tag inconfig.xml is set like this:<access origin="*" />

• Added "gap:" and "cdvfile:" in my meta CSP tag, nothing is changing

• I've read about some HTTP server to serve these files from file system through Ajax, but I'm afraid that that's not possible because I've been told to avoid that kind of solution by my superiors

I've tried other solutions to similar problems without luck, and I'm sorry if I didn't listed them here, but I'm trying to solve this for about a week and I forgot what else I've tried. Maybe I got something wrong or I didn't understood docs how I should, if you guys have a solution or a proposition I will gladly try it.

Thanks in advance!

Answer 1

This problem was fixed for me (with Cordova-ios v6.2.0) by using WkWebView.convertFilePath(cordova.file.dataDirectory+myfile) and adding the schema and hostname preferences to config.xml

<platform name="ios">
    <preference name="scheme" value="app" />
    <preference name="hostname" value="localhost" />
</platform>

Edit: Example usage

if(deviceType == 'ios'){
  var localURL = window.WkWebView.convertFilePath(cordova.file.dataDirectory+"myfile.jpg");
}else{
  var localURL = cordova.file.dataDirectory+"myfile.jpg";
}

return "<img src=\""+localURL+"\">";

Answer 2

I fixed it with the same solution I already tried, and I got it working with 'cordova.file.documentsDirectory', i must have missed something the first time I tried it.

Answer 3

I had the same problem with the new releases of ios. As far as I can remember window.WkWebView.convertFilePath([your file path]); isn't enough and I can't provide an exact solution but what I ended up doing was:

if(path.startsWith("cdvfile://")) {
    resolveLocalFileSystemURL(path, p => {
       return WkWebView.convertFilePath(p.toURL())
    }
}