与Service Worker脱机时处理文件上载 [英] Handling File Uploads When Offline With Service Worker

问题描述

我们有一个Web应用程序(使用AngularJS构建)，我们也在逐步添加PWA的功能"(服务工作者，可启动项，通知等).我们的Web应用程序具有的功能之一是能够在离线状态下完成Web表单.目前，我们在脱机时将数据存储在IndexedDB中，并只是鼓励用户将数据在线后将其推送到服务器(此表单已保存到您的设备中.现在您重新联机，您应该保存传到云端...").我们会在某个时候自动执行此操作，但是目前没有必要.

We have a web app (built using AngularJS) that we're gradually adding PWA 'features' too (service worker, launchable, notifications, etc). One of the features our web app has is the ability to complete a web form while offline. At the moment, we store the data in IndexedDB when offline, and simply encourage the user to push that data to the server once they're online ("This form is saved to your device. Now you're back online, you should save it to the cloud..."). We will do this automatically at some point, but that's not necessary at the moment.

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

We are adding a feature to these web forms, whereby the user will be able to attach files (images, documents) to the form, perhaps at several points throughout the form.

我的问题是-服务工作者是否可以处理文件上传?某种程度上-也许-在脱机时存储要上传的文件的路径，并在恢复连接后向上推该文件吗?这样是否可以在移动设备上正常工作，因为我们可以访问那些设备上的路径"吗?任何帮助，建议或参考，将不胜感激.

My question is this - is there a way for service worker to handle file uploads? To somehow - perhaps - store the path to the file to be uploaded, when offline, and push that file up once the connection has been restored? Would this work on mobile devices, as do we have access to that 'path' on those devices? Any help, advice or references would be much appreciated.

推荐答案

当用户通过<input type="file">元素选择文件时，我们可以通过fileInput.files获取所选文件.这为我们提供了一个FileList对象，其中的每个项目都是一个File对象，代表选定的文件. HTML5的结构克隆算法.

When the user selects a file via an <input type="file"> element, we are able to get the selected file(s) via fileInput.files. This gives us a FileList object, each item in it being a File object representing the selected file(s). FileList and File are supported by HTML5's Structured Clone Algorithm.

将项目添加到IndexedDB存储时，它会创建一个要存储的值的结构化克隆.由于FileList和File对象受结构化克隆算法支持，因此这意味着我们可以将这些对象直接存储在IndexedDB中.

When adding items to an IndexedDB store, it creates a structured clone of the value being stored. Since FileList and File objects are supported by the structured clone algorithm, this means that we can store these objects in IndexedDB directly.

要在用户再次联机后执行这些文件上载，可以使用Service Worker的Background Sync功能.有关如何执行此操作的介绍性文章.还有很多其他资源.

To perform those file uploads once the user goes online again, you can use the Background Sync feature of service workers. Here's an introductory article on how to do that. There are a lot of other resources for that as well.

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

In order to be able to include file attachments in your request once your background sync code runs, you can use FormData. FormDatas allow adding File objects into the request that will be sent to your backend, and it is available from within the service worker context.

这篇关于与Service Worker脱机时处理文件上载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！