在Nuxt PWA中基于Web Share API实现图片分享的问题求助

我在Nuxt PWA应用中实现图片分享时遇到了困难。使用简单的GET请求实现文本分享非常容易，但改用POST请求后，需要Service Worker处理逻辑时问题就出现了。

share_target配置 #

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

原离线处理Service Worker代码 #

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
        }
      })()
    )
  }
})

尝试过的解决方法 #

• 在原fetch处理器中添加第二个if判断
• 为fetch事件添加第二个处理器
• 创建另一个Service Worker专门加载数据

自定义的POST请求处理逻辑 #

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 })
    })()
  )
})

客户端消息监听代码 #

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

目前我要么遇到页面找不到的问题，要么进入页面后完全接收不到数据。希望能得到一些指导，请问我哪里遗漏了？

内容的提问来源于stack exchange，提问作者André Ferreira