WebKit webview (WKwebview) cannot load resources outside of app directory

Question

As UIWebview is now deprecated we started to use the WKwebview. Being Cordova users we added cordova-plugin-wkwebview-engine as described here: https://cordova.apache.org/news/2018/08/01/future-cordova-ios-webview.html

1 - First, our app is built and shipped including assets (icons, images, etc) whose path starts with: file:///var/containers/Bundle/Application/[APP_ID]/[APP_NAME]/www/files/project/home/iconA.svg

These assets are correctly displayed.

2 - Then on startup the app also checks with our backend if there is any update available. If some assets have been updated, then the app downloads them in the data directory. The path to the above asset becomes: file:///var/mobile/Containers/Data/Application/[APP_ID]/Library/NoCloud//V1/files/project/home/iconA.svg

...but these assets are not displayed.

NB1: In both cases, the resource is declared in a background-image css property.

NB2: We've been using this process for years with success with the former UIwebview.

-

In the network panel of Safari's web inspector, the resource appears in red, with a red message indicating that an error occurred while trying to load it. There is no error code, nothing technical to help, no more detail than this message...

I ran some tests and it appears that the ressource is present on the file system at the given path. (Using cordova-plugin-file I can output the svg content).

So, first conclusion would be that the WKwebview cannot access resources outside of app directory? As anyone any information, experience to share? Does anyone know a work-around?

Any help would be greatly appreaciated.

Cheers from France!

Kapitein Witbaard Kapitein Witbaard · Accepted Answer · 2018-11-07T10:14:09

Took some time, but eventually got this fixed. Quite simple, but you need to know how.. First make sure you are using the newest version of the webview. In my case that's 2.2.0

ionic cordova plugin rm cordova-plugin-ionic-webview
ionic cordova plugin add cordova-plugin-ionic-webview@latest

Now check your code and make sure all images outside the www are referenced properly. Won't work:

cdvfile://
file://

Will work:

http://localhost:8080/
http://localhost:8080/_file_/
absolute paths '/'
and relative paths

You should convert cdvfile:// to file://

resolveLocalFileSystemURL('cdvfile://localhost/library-nosync/image.jpg', 
  function(entry) {
    var newname = entry.nativeURL;
  }
);

You should convert file:// to localhost:8080. Like this:

var newname = window.Ionic.WebView.convertFileSrc('file:///var/containers/Bundle/Application/[APP_ID]/[APP_NAME]/www/files/project/home/iconA.svg');

WebKit webview (WKwebview) cannot load resources outside of app directory

1 Answers