我们可以使用来自 Webworker 的 JavaScript FileSystemAPI 吗？答案

【问题标题】：Can we use JavaScript FileSystemAPI from a Webworker?我们可以使用来自 Webworker 的 JavaScript FileSystemAPI 吗？
【发布时间】：2021-06-21 03:41:08
【问题描述】：

我们可以使用来自 webworker 的 JavaScript FileSystemAPI 吗？

https://developer.mozilla.org/en-US/docs/Web/API/FileSystem

在他们的文档中他们没有提到任何东西，但在使用它时没有定义它的投掷窗口。

谢谢！

【问题讨论】：

标签： javascript google-chrome html5-filesystem

【解决方案1】：

不是真的……

曾经有一个 self.webkitRequestFileSystemSync() 方法可以在 Worker 范围内访问，但它已被弃用。而且您从 drop 事件中获取的 FileSystem 对象无法序列化，因此无法从主线程发布到 Worker。

但是，我怀疑您并不是真的想使用 FileSystem API，它在 Web 上下文中并不是很有用，但是您可能更喜欢 File System Access API，它可以让您的页面访问用户的文件系统（尽管它仍然只在基于 Chromium 的浏览器中可用）。

但是从 Web Worker 使用这个 API 也并不简单。
要向文件系统访问 API 发出请求，我们需要处理用户手势。 Web Worker 无权访问 UI，因此他们也无权访问 UI 事件 (yet)。

所以我们必须从 UI 线程发出请求。

但是，与 FileSystem 对象相反，FileSystemHandles 是可序列化的，并且可以通过 postMessage() 发布，因此一旦您获得句柄，就可以将其发布给您的工作人员并从那里开始工作。

在 UI 线程中

btn.onclick = async (evt) => {
  const dirHandle = await showDirectoryPicker();
  worker.postMessage( dirHandle );
};

然后在 Worker 线程中，您可以在 MesageEvent.data 中接收该句柄，并像在主线程中一样使用它。

这是一个live demo，以及它的source。

【讨论】：

嗨@Kaiido，我们可以在页面重新加载期间将 dirHandle 保存在浏览器存储中，如 localStorage 并稍后使用吗？
我不这么认为，你必须重新申请。
@PradeeptaKumarKhatoi it appears that you can save handles for something like a "recent files" list，但您必须重新请求权限才能读取/写入文件。

【解决方案2】：

Webworkers global object 名称是 global，而不是 window。并且没有 FileSystem API

【讨论】：

所以我们不能从工人那里使用？有什么解决办法吗？
@PradeeptaKumarKhatoi developer.mozilla.org/en-US/docs/Web/API/LocalFileSystemSync
全局对象在 Worker 范围内被称为self，但感谢globalThis，我们可以对全局对象进行上下文无关的访问。（global 是节点）。