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

Posted 2023-03-12

【中文标题】WebKit webview (WKwebview) 无法加载应用目录之外的资源

【英文标题】：WebKit webview (WKwebview) cannot load resources outside of app directory

【发布时间】：2018-09-17 17:34:27

【问题描述】：

由于现在不推荐使用 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：在这两种情况下，资源都在 background-image css 属性中声明。

NB2：我们多年来一直在使用这个过程，并在以前的 UIwebview 上取得了成功。

-

在 Safari 网络检查器的网络面板中，资源显示为红色，并带有一条红色消息，表示尝试加载它时发生错误。没有错误代码，没有任何技术帮助，没有比这条消息更详细的信息......

我进行了一些测试，发现 资源存在于文件系统中 位于给定路径。 （使用 cordova-plugin-file 我可以输出 svg 内容）。

那么，第一个结论是 WKwebview 不能访问 app 目录之外的资源？ 任何人有任何信息，经验分享？有人知道解决方法吗？

任何帮助将不胜感激。

来自法国的干杯！

【参考方案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');

【讨论】：

在模拟器中似乎可以正常工作，但在构建到我的手机时却不行。有什么建议吗？

嗨杰森。来自 adb 的日志？代码？没有细节就帮不上忙。请作为您自己的问题发布并在此处参考，如果您提供详细信息，我将查看它。