WebKit Webview(WKwebview)无法加载应用程序目录之外的资源

时间:2018-09-17 17:34:27

标签: ios cordova wkwebview

由于不推荐使用 UIWebview ,我们开始使用 WKwebview 。作为 Cordova 用户,我们添加了cordova-plugin-wkwebview-engine,如下所述:https://cordova.apache.org/news/2018/08/01/future-cordova-ios-webview.html

1-首先,我们构建并发布了我们的应用程序,其中包括以以下路径开头的资产(图标,图片等): file:///var/containers/Bundle/Application/[APP_ID]/[APP_NAME]/www/files/project/home/iconA.svg

这些资产正确显示。

2-然后,在启动时,应用程序还会与我们的后端检查是否有可用的更新。如果某些资产已更新,则应用程序会将其下载到数据目录中。上述资产的路径变为: file:///var/mobile/Containers/Data/Application/[APP_ID]/Library/NoCloud//V1/files/project/home/iconA.svg

...但是这些资产不会显示。

NB1:在两种情况下,资源都是在背景图片css属性中声明的

NB2:在过去的UIwebview上,我们已经成功地使用了这一过程。

-

在Safari的Web检查器的网络面板中,资源显示为红色,并带有红色消息,指示尝试加载时发生错误。没有错误代码,没有任何技术帮助,没有比此消息更多的信息.​​..

我进行了一些测试,看来资源在给定路径上在文件系统上。 (使用cordova-plugin-file我可以输出svg内容。)

那么,第一个结论就是WKwebview无法访问应用程序目录之外的资源? 作为任何人的任何信息,经验分享?有人知道解决方法吗?

任何帮助都会得到极大的帮助。

来自法国的欢呼声!

1 个答案:

答案 0 :(得分:1)

花了一些时间,但最终解决了这个问题。非常简单,但是您需要知道如何。首先确保您使用的是最新版的Webview。在我的情况下是2.2.0

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

现在检查您的代码,并确保正确引用了www之外的所有图像。 不起作用:

cdvfile://
file://

会工作:

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

您应该将cdvfile://转换为file://

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

您应该将file://转换为localhost:8080。像这样:

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