Reading big media files make WKWebView crash with cordova-ios-6.x

[gerhardsletten]

Bug Report

After migration from cordova-ios-5.x to cordova-ios-6.x we now see that the cordova no longer support reading files in chunks. Instead the whole file is loaded into memory, which will limit file access to what is available on your device.

Problem

After what I can see, it looks like CDVURLSchemeHandler is handling access of local files in a cordova app, and it does not support delivering files with range headers so WKWebView don't need to load the whole file at once.

What is expected to happen?

Earlier with UIWebView we did not experience this so I guess that cordova on UIWebView handled this by reading these files in chunks. (Or it was packed with the default file-reading that UIWebView had)

What does actually happen?

Running simulator or a device attached to xcode we see a memory spike at the same size as the file you try to access. If you are on a device that can not handle this, it will result in a restart of the webview.

Information

Think the same problem is reported here for cordova-plugin-ionic-webview

Version information

[email protected]

Checklist

• I searched for existing GitHub issues
• I updated all Cordova tooling to most recent version
• I included all the necessary information above

[timbru31]

Can you share an example project that we could use to debug the issue?

[gerhardsletten]

@timbru31 Will do, I was looking for examples of stream-delivery with WKURLSchemeTask, but I have not found anything yet. Would think that also for native iOS apps, there would be use cases where content would be displayed within a WKWebView for simpler formatting, but maybe they would use the native playback of locally stored video and audio-file.

In this app I work with, we both support streaming and local playback of audiobooks, and since cordova-plugin-media did not support streaming, using the build in audio-tag in html5 worked well for both cases in the previous versions of cordova-ios.

[gerhardsletten]

@timbru31 You can find an example here: https://www.dropbox.com/s/900pfcoouh9h9xl/mp3Player.zip?dl=0

The 700mb mp3-audio book is to big for a github-repo. Its embedded right into the app to keep the example simple.

When running the app, you can click the InitAudio button which will read the file, and insert the native url into a tag.

function initAudioPlayer() {
  const audioEl = document.getElementById('audioEl');
  const file = cordova.file.applicationDirectory + "www/audio/ulyssess-grant.mp3";
  window.resolveLocalFileSystemURL(file, function(entry) {
    audioEl.style.display = "block"
    const nativePath = entry.toURL();
    const usedPath = window.WkWebView.convertFilePath(nativePath)
    audioEl.src = usedPath;
  })
}

If you have the memory usage open, you will see a big spike.

[mlegenhausen]

I can confirm the problem. We have an offline functionality in our app that downloads a video of roughly the same size. When using the generated path from convertFilePath in the source tag for an video element the app crashes randomly due to these memory spikes and what was previously to cordova-ios@6 an instant load of the video now takes "ages" do to the loading time of the file into memory.

[iyevpak]

Hello,
any news about this problem?

[gerhardsletten]

Did research a lot if there was some way around this, but since you have to upgrade to WKWebView to work on the latests ios-versions and since cordova with WKWebView don't support a streamed reading of files, cordova is not longer an option if your app require these things. I migrated the app over to React Native.

[iyevpak]

Thanks for reply

[0pamama]

Hello, I am still facing this issue. Is there any solution now?

[mlegenhausen]

You can work around this issue with the cordova-httpd Plugin. The trick is to start a local web server on your device and fetch all bigger resources from there. Be careful when you bind to a port. It could actually already be taken so you will need some fallback strategy, like trying another port until you found a free one.

[0pamama]

Thank you! I will give it a try...
Is this a WKWebView issue or is it cordova-ios related? I noticed that requests with custom scheme do not contain range header!?

[jbgtmartin]

I think that this issue is related to WKWebView itself. See this WebKit issue, that has been fixed but not landed yet in iOS. I have tried with iOS 15.4.1 and the memory usage is still huge. So I guess that it will be fixed in a future iOS release, but I don't know which one.

[dpogue]

Is this fixed with iOS 16?

[dpogue]

Range headers are now included in the WKURLSchemeTask headers on recent versions of iOS, but this is still an issue because the Range headers need to actually be handled in the Scheme Handler.

There's a PR on the Ionic webview plugin (ionic-team/cordova-plugin-ionic-webview#692) that looks promising as far as implementing that logic, so we should be able to try something similar here.