Image upload is stalled if the user changes app

[raphodn]

Story

I'm hearing some feedback from users uploading MANY price tag images, via smartphone, and wanting to change app during the upload. And the upload is not pursued in the background.

Need to test more before exploring possible (if possible ?) solutions

[numericals-org]

Investigation & Proposed Solution

I've investigated this issue and here's what's happening and what I think we can do about it.

Root cause

When a user switches apps on a smartphone, the mobile OS (both Android and iOS) suspends the browser tab and pauses JavaScript execution. Any in-flight fetch upload request is stalled and doesn't recover when the user comes back.

This is a browser-level constraint — not something we can fix in a single line. But there are realistic workarounds depending on the platform.

---

Files that would be touched

File	Change
src/components/ProofUploadCard.vue	Hook into the new upload service; add mobile warning
src/services/api.js	Route proof uploads through the resilience wrapper
src/views/AddProofs.vue	Show a "keep tab open" banner on mobile during bulk upload
src/utils/backgroundUpload.js	New file — Background Fetch API + IndexedDB queue fallback
public/sw.js	Add backgroundfetch success/fail event handlers

---

Proposed approach

1. Background Fetch API (Android + Chrome)
On supported browsers, we hand the upload off to the browser/OS itself, which continues it even when the tab is backgrounded.

// src/utils/backgroundUpload.js
export async function uploadProofWithResilience(formData) {
  if ('BackgroundFetchManager' in self) {
    const reg = await navigator.serviceWorker.ready
    return reg.backgroundFetch.fetch('proof-upload', [
      new Request('/api/v1/proofs/upload', { method: 'POST', body: formData })
    ], { title: 'Uploading price tag images' })
  }
  // fallback 👇
  return queueUploadWithRetry(formData)
}

2. IndexedDB queue + retry on return (iOS Safari + all other browsers)
Since iOS Safari has a hard OS-level restriction against background fetch, the best available fallback is:

• Queue pending uploads in IndexedDB
• Listen for visibilitychange — when the user returns to the tab, automatically retry any queued uploads

3. UX warning banner on mobile
For users where neither approach is available (or as a general heads-up), show a non-intrusive warning during bulk uploads:

⚠️ Keep this tab open while uploading. Switching apps may pause the upload.

---

Platform reality check

Platform	Background upload possible?	Our approach
Android Chrome	✅ Yes	Background Fetch API
Android PWA	✅ Yes	Background Fetch API
iOS Safari	❌ Hard OS limit	IndexedDB queue + retry on return
iOS PWA	❌ Hard OS limit	IndexedDB queue + retry on return
Desktop	✅ Not affected	No change needed

---

Does this approach look good to you? Happy to open a PR if the direction is validated. Also open to suggestions — especially if there's an existing SW setup I should be aware of.