javascript - 使用 Service Worker 离线处理文件上传

Question

我们有一个网络应用程序(使用 AngularJS 构建)，我们也在逐渐添加 PWA“功能”(服务 worker 、可启动、通知等)。我们的 Web 应用程序的其中一项功能是能够在离线时完成 Web 表单。目前，我们在离线时将数据存储在 IndexedDB 中，并简单地鼓励用户在他们在线时将该数据推送到服务器(“此表单已保存到您的设备。现在您重新在线，您应该保存它到云端……”)。我们会在某个时候自动执行此操作，但目前没有必要。

我们正在为这些 Web 表单添加一项功能，用户可以借此将文件(图像、文档)附加到表单，可能在整个表单的多个位置。

我的问题是 - service worker 有没有办法处理文件上传？以某种方式 - 也许 - 在离线时存储要上传的文件的路径，并在连接恢复后推送该文件？这是否适用于移动设备，因为我们可以访问这些设备上的“路径”吗？非常感谢任何帮助、建议或引用。

Answer 1

当用户通过 <input type="file"> 选择文件时元素，我们可以通过 fileInput.files 获取选定的文件.这给了我们一个 FileList对象，其中的每一项都是一个 File表示所选文件的对象。 FileList和 File受 HTML5 的支持 Structured Clone Algorithm .

将项目添加到 IndexedDB 存储时，它会创建所存储值的结构化克隆。自 FileList和 File结构化克隆算法支持对象，这意味着我们可以将这些对象直接存储在 IndexedDB 中。

要在用户再次上线后执行这些文件上传，您可以使用服务 worker 的后台同步功能。这是 an introductory article关于如何做到这一点。还有很多其他资源。

为了能够在您的后台同步代码运行后在您的请求中包含文件附件，您可以使用 FormData . FormData允许添加 File将对象放入将发送到后端的请求中，并且可以从服务 worker 上下文中获得。