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 https://github.com/chrisben/imgcache.js/issues/237#issuecomment-496185249

[afrish]

Here is what I did to fix loading of images cached with ImgCache.js under WKWebView.

1. Add this line to config.xml:

   <platform name="ios">
       <!-- Line here under iOS settings -->
       <preference name="iosPersistentFileLocation" value="Library" />

2. Use next code to normalize URL loaded from ImgCache.js:

   private normalizeUrl(url: string) {
       let result = url;
   
       const cdvfilePrefix = 'cdvfile://localhost/persistent/imgcache/';
       if (ionic.Platform.isIOS() && url.indexOf(cdvfilePrefix) === 0 ) {
           result = this.getIosImgCacheDirectoryUrl() + url.split(cdvfilePrefix)[1]
       }
   
       if (ionic.Platform.isIOS()) {
           result = result.replace(/^file:\/\//g, '');
       }
   
       return result;
   }
   
   private getIosImgCacheDirectoryUrl(): string {
       return cordova.file.dataDirectory.split('Library')[0] + 'Library/files/imgcache/';
   }

3. After that use it on the cachedUrl

      ImgCache.getCachedFileURL(src,
            (originalUrl, cacheUrl) => {
              const localUrl = this.normalizeUrl(cacheUrl);
              // now you can use it for <img src="{{localUrl}}>
            });

The resulting URL on iOS will be something like:

/var/mobile/Containers/Data/Application/<UUID>/Library/files/imgcache/<UNIQUE_FILE_ID>

Note that it must start with /, not with cdvfile://, nor file://, nor http://localhost:8080/, nor anything else

[tryhardest]

@jperez1111 awesome! Anything we have to do differently or modify if not using Ionic, to get this to work?

[jperez1111]

@tryhardest sorry, I haven't used this library in any other context than with Ionic.

[maximnara]

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.

Thank you so much, this is working for me