处理上传文件时脱机服务人员

Question

我们有一个Web应用程序（使用AngularJS建），我们正在逐渐增加PWA“功能”太（服务工作者，被启动的，通知等）。我们的网络应用的功能之一是能够在离线状态下完成网络表单。目前，我们在离线状态下将数据存储在IndexedDB中，并且只需鼓励用户在数据在线时将这些数据发送到服务器（“此表单已保存到您的设备中，现在您已重新上线，您应该保存它对云......“）。我们会在某个时候自动做到这一点，但目前没有必要。

我们正在增加一个功能，将这些网页形式，从而使用户可以附加文件（图片，文件）的形式，也许在整个表格的几个点。

我的问题是 - 是否有服务人员的方式来处理文件上传？以某种方式 - 或许 - 在离线状态下存储要上传的文件的路径，并在连接恢复后将该文件向上推送？这是否可以在移动设备上使用？我们是否可以访问这些设备上的“路径”？任何帮助，建议或参考将非常感激。

Answer 1

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

当添加项的索引资料商店时，它创建所存储的值的结构化克隆。由于结构化克隆算法支持FileList和File对象，这意味着我们可以直接将这些对象存储在IndexedDB中。

执行这些文件上传则当用户再次上线，您可以使用劳务工的背景同步功能。这里的an introductory article如何做到这一点。还有很多其他资源。

为了能够在您的请求文件的附件，一旦你的背景同步代码运行，你可以使用FormData。 FormData s允许将File对象添加到将发送到后端的请求中，并且可以在服务工作者上下文中使用它。