Unsupported URL issue on WKWebView

[manishoswal]

The image caching works fine on ios app (cross platform) if we do not use cordova-plugin-ionic-webview as soon as we install this plugin i am getting the following error

Error - Failed to load resource: unsupported URL cdvfile://localhost/persistent/imgcache/adf3c56ed32d0fc3206e4adff2b608bad41aff38.png

[gkTim]

Hi,

so I assume that you are using the ionic wkwebview plugin. If thats the case here is a workaround for the problem:

You need to install the cordova file plugin first.

ImgCache.getCachedFileURL(src,
            (originalUrl, cacheUrl) => {
              const file = new File();
              const cacheFileUrl = cacheUrl.replace('cdvfile://localhost/persistent/', file.documentsDirectory);
              const localServerFileUrl = cacheFileUrl.replace('file://', 'http://localhost:8080');
              //localServerFileUrl contains the loadable url
              resolve(localServerFileUrl);
            },
            (e) => {
              console.error('img-cache-error:', e);
              reject(e)
            });

Hope this fix your problem.

[ish3lan]

I am facing th same issue, the solution suggested above is not working for me.

[manishoswal]

Its not working for me when i use iosPersistentFileLocation as Library. Getting 404 error.
You need to change iosPersistentFileLocation to Compatibility for the above solution to work.

[owen2345]

@manishoswal can you please give an example about it?
Apparently it is not possible to use cdvfile with WKWebView.
Regards!

[manishoswal]

@owen2345 - You need to implement the changes suggested by gkTim on Sep 29 and also update the config.xml file to

[marianocodes]

hey guys, I've fixed the problem. Here you can find an example
https://github.com/mahcr/offline-ionic

[chrisben]

@mahcr did you manage to have it working without @Maistho 's pull request?
I'm considering whether this PR is required or not for Ionic.

[Maistho]

It is not required do this conversion inside imgcache.js, but it is required to add code to edit the url that is received from imgcache.js otherwise.

[Cntryboy82]

#228

[jperez1111]

Any updates on this? Mistho's PR does not work for me, window.Ionic.normalizeURL doesn't change the url of type cdvfile//..., so the resulting url is still incompatible.

[jperez1111]

To get a loadable url for both iOS and Android, I came up with the following solution, based on cordova-plugin-file documentation:

window.resolveLocalFileSystemURL(cacheUrl, (entry: any) => {
   cacheUrl = entry.toURL();
   const ionicNormalizer = window.Ionic &&
      ((window.Ionic.WebView && window.Ionic.WebView.convertFileSrc) || window.Ionic.normalizeURL);
   if (typeof ionicNormalizer === "function") {
       cacheUrl = ionicNormalizer(cacheUrl);
   }

entry.toURL() will convert cdvfile:// url to a native path, i.e. an absolute file:// url. The ionicNormalizer will then normalize this url, e.g. to a localhost url.

[bocodigital]

Sweet victory @jperez1111 you are the bomb!!!

[AhsanAyaz]

Fixed the problem using @jperez1111's reply and with some changes as mentioned in #237 (comment)