Cordova load resource from documents issue (WKwebview)

Viewed 1410

We have a very simple Cordova application that downloads all the App's content to the /Documents/ folder. Here we store html, images, css and javascripts. We recently moved to the WKWebview because the old one is deprecated. HTML is read from the documents and appended to the local index file. This all works fine. After this we try to append the script block by setting the src to 'file://.../data/Containers/Application/Documents/test.js' (the file is there). Unfortunately this is not supported, we get the message: Failed to load resource: The operation couldn’t be completed. Operation not permitted We are using the latest Cordova and latest IOS platform.

Does anyone have an idea on how to solve this? It all works fine in the simulator but not on the iPad device.

Many thanks in advance.

Robin

2 Answers

There is also a solution, which requires no significant change to the code which I found after hopeless days when no solution seemed available

There are 2 steps required:

First update your config.xml with following

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

Then convert your file:// link by using the undocumented method

window.WkWebView.convertFilePath(filePath)

This method performs the conversion into a virtual localhost link that makes the file accessible and bypasses the WkWebView restrictions. A little bit longer sample goes like this

let localFile = cordova.file.dataDirectory + 'logo.png';
let convertedPath = window.WkWebView.convertFilePath(localFile);
document.getElementById("myImg").src = convertedPath;

Ah. I just fixed file protocol 'file://' and web links with target='_blank' 2 days back in my application. WKWebView has issue. But there are some plugins, which can solve this problem.

Try installing cordova-plugin-wkwebview-file-xhr and cordova-plugin-wkwebviewxhrfix plugins, which resolves the issue with file protocol.

Related