處理上傳文件時脫機服務人員

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對象添加到將發送到後端的請求中，並且可以在服務工作者上下文中使用它。