How to implement file sharing with Web Share API in Nuxt with @nuxtjs/pwa

Question

I'm having a hard time to implement sharing an image to my nuxt PWA app. Sharing text was a piece of cake with a simple GET request. But my problems start as soon I as change to a POST request and a service worker is necessary to handle the logic.

Here's my share_target config:

share_target: {
        action: '/shared',
        method: 'POST',
        enctype: 'multipart/form-data',
        params: {
          text: 'text',
          files: [
            {
              name: 'image',
              accept: ['image/*'],
            },
          ],
        },
      },

I already had a service worker to handle the user being offline, and it had an event listener for fetch:

self.addEventListener('fetch', (event) => {

  if (event.request.mode === 'navigate') {
    event.respondWith(
      (async () => {
        try {
          const preloadResponse = await event.preloadResponse
          if (preloadResponse) {
            return preloadResponse
          }

          const networkResponse = await fetch(event.request)
          return networkResponse
        } catch (error) {
          console.log('Fetch failed; returning offline page instead.', error)

          const cache = await caches.open(CACHE_NAME)
          const cachedResponse = await cache.match(OFFLINE_URL)
          return cachedResponse
        }
      })()
    )
  }
})

So I tried all these things:

• Adding a second if to that handler;
• Adding a second handler to the fetch event;
• Creating another service worker just to load data;

Here's the logic of the handler:

self.addEventListener('fetch', (event) => {
  if (
    event.request.method !== 'POST' ||
    !event.request.url.includes('/shared')
  ) {
    event.respondWith(fetch(event.request))
    return
  }

  event.respondWith(Response.redirect('/shared'))
  event.waitUntil(
    (async () => {
      const client = await self.clients.get(
        event.resultingClientId || event.clientId
      )
      const data = await event.request.formData()
      const image = data.get('image')
      const text = data.get('text')
      // send the image data to the client
      client.postMessage({ text, image })
    })()
  )
})

On the client I'm just listening to the serviceWorker message:

mounted() {
    navigator.serviceWorker.onmessage = function (event) {
      const imageBlob = event.data.image
      const text = event.data.text
    }
  }
}

I'm basically either getting a page not found, or I don't get anything at all when I do reach the page. Would appreciate some guidance here. Is there something I'm missing?

Cheers