使用 Web 共享目标 API 时避免重新加载 PWA答案

【问题标题】：Avoiding PWA to reload when using Web Share Target API使用 Web 共享目标 API 时避免重新加载 PWA
【发布时间】：2020-12-01 08:48:46
【问题描述】：

我正在开发一个播放音乐的 PWA。它通过Web Share Target API 接受来自其他安卓应用的共享 URL。

问题： 每当通过 API（使用 GET 请求）共享某些内容时，我的 PWA 都会重新加载（如预期的那样）。并且已经播放的音乐因此停止。

有什么方法不会重新加载页面吗？

目前正在使用此代码获取共享参数。

const parsedUrl = new URL(window.location);

My PWA 是单页应用程序

谢谢

【问题讨论】：

标签： javascript web single-page-application progressive-web-apps web-share

【解决方案1】：

防止重新加载的一种方法是在您的 Web 应用程序清单中设置一个虚假路径，该路径仅用于接收共享（请注意，这使用 HTTP POST 和“multipart/form-data”编码 [所以稍后您可以扩展应用程序以接收整个文件]）：

{
    "share_target": {
        "action": "/receive-shares",
        "method": "POST",
        "enctype": "multipart/form-data",
        "params": {
            "title": "name",
            "text": "description",
            "url": "link"
        }
    }
}

然后在你的 service worker 的 fetch 处理程序中，你处理传入的共享并将用户重定向到 home：

self.addEventListener('fetch', (e) => {
  if ((e.request.url.endsWith('/receive-shares')) &&
      (e.request.method === 'POST')) {
    return e.respondWith((async () => {
      // This function is async.
      const formData = await fetchEvent.request.formData();
      // Do something with the URL…
      const url = formData.get('url');
      // Store the URL, process it, communicate it to the clients…
      // You need to redirect the user somewhere, since the path
      // /receive-shares does not actually exist.
      return Response.redirect('/', 303);
    })())
  }
  /* Your regular fetch handler */
})

【讨论】：