Cordova Mobile：Web 文件 API 无法正常工作

Question

我们最近将一个 Cordova 应用迁移到了 Capacitor。我目前正在开发一个功能，它使用 Canvas blob 数据来创建 File (WebAPI)，我们将其发送到 API。但我注意到 Capacitor WebView 中的文件 API 已过时且已损坏：

在屏幕截图中，我正在 iPhone 8 和 iOS 14.3 上调试应用程序，您会注意到文件的大小始终为零，名称属性不知何故实际数据。（e 是一个 Blob）。

第一个示例显示从 blob 创建文件，但之后文件的大小为 0，名称为 BlobArray。

const e = blob;
new File([e], 'asdf', {type: e.type})

第二个示例显示了基本的 MDN File 示例，它在 Chrome 和 Desktop Safari 中运行良好，但在移动设备上它也使用字符串数组作为名称

new File(["foo"], "foo.txt", {
  type: "text/plain",
});

我也在 iOS Safari 浏览器中尝试过，效果很好。

因此我不得不假设我们的 Capacitor App 使用的是过时的 Safari 版本。不幸的是，我找不到任何关于如何为 Ionic/Capacitor.

设置 WebView/Safari 版本的信息

这是我的设置：

设备：iPhone8
iOS版本：14.3
离子应用程序的用户代理：

Mozilla/5.0 (iPhone; CPU iPhone OS 14_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148

iOS Safari 的用户代理：

Mozilla/5.0 (iPhone; CPU iPhone OS 14_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.2 Mobile/15E148 Safari/604.1

包和版本：

    "@capacitor/cli": "2.4.6",
    "@capacitor/core": "2.4.6",
    "@capacitor/ios": "^2.4.6",
    "ionic": "^5.4.14",
    "@ionic/angular": "^5.4.1",
    "@ionic/angular-toolkit": "~2.0.0",
    "ionic-native": "^2.9.0",
    "@ionic-native/file-transfer": "^5.29.0",
    "cordova-plugin-file": "^6.0.2",

有没有办法为 WebView 设置 Safari 版本，或者这可能是我们配置错误的情况（因为迁移到电容器）？

Answer 1

我能想到的唯一有用的方法是尝试更改或更新到 @capacitor/ios 的不同版本。这个包是控制电容器使用的 webview 的一部分。我认为没有办法直接设置它。

我制作了一个虚拟项目，它使用 "@capacitor/ios": "^2.4.5" 和运行您发布的第二个示例。对我来说很好。

Answer 2

通过查看调试器中的 File 原型，我注意到 File 构造函数完全不同。

我用谷歌搜索了代码片段，发现该代码来自 cordova-plugin-file package。该插件会覆盖全局文件变量。因此 File Web API 不再可用。

通过删除插件（以及依赖它的插件）我们能够解决这个问题。

相关Github问题：https://github.com/apache/cordova-plugin-file/issues/453

Cordova Mobile：Web 文件 API 无法正常工作

Cordova Mobile: Web File API doesn't work correclty

ios

fileapi

cordova

ionic-framework

capacitor