request.formdata will fail if request is issued by a fetch in page

Library Affected: background-sync

Browser & Platform: Google Chrome for Linux

I have a page with a form. This form is submitted via a fetch() in the page. This fetch is captured by the SW and if the page is offline the catch will trigger, and the request will be queued. All is well until now. But, if I want to use request.clone().formData(), while offline, this will fail.

Now, if the form is submitted directly (without using a fetch) request.clone().formData() will work.

self.addEventListener('fetch', (event) => {
  // Clone the request to ensure it's safe to read when adding to the Queue.
  const promiseChain = fetch(event.request.clone()).catch(async(err) => {
    const formdata = await event.request.clone().formData()
     // will fail if the fetch is first issued from a page fetch
     // the request will fail with a 'Fail to fetch' error
    console.log(...formdata)
    return queue.pushRequest({request: event.request})
  });

  event.waitUntil(promiseChain);
});

The only difference is that in the first case (form submitted through fetch), the request.mode is “cors”, and in the second case (form submitted directly) the request.mode is “navigate”, which makes sense.

Is there a way to get the content of formData when request.mode is “cors” ?

Thank you for any insight. I know this happens before the call to pushRequest

[planeth44]

I think I solved this :

async function handleSubmit(e)
{
    e.preventDefault()
    const formDataToSubmit = await buildFormData(e)
   // more code
}

[K85]

I think I solved this :

async function handleSubmit(e)
{
    e.preventDefault()
    const formDataToSubmit = await buildFormData(e)
   // more code
}

This works.