将媒体从另一个应用程序共享到我的应用程序时，如何在我的 PWA 应用程序中处理媒体共享？

Posted 2023-03-07

【中文标题】将媒体从另一个应用程序共享到我的应用程序时，如何在我的 PWA 应用程序中处理媒体共享？

【英文标题】：How can I handle Media sharing in my PWA app when sharing media from another app into my app?

【发布时间】：2021-04-06 11:51:33

【问题描述】：

我正在开发一款适用于网络版和移动版的渐进式网络应用。我正在与其他应用程序共享媒体文件，但是当我在选择我的应用程序后将来自另一个应用程序（或任何其他社交媒体，如 Facebook、Messenger、LinkedIn）的媒体共享到我的应用程序时，它只会打开并变成黑屏。我需要有关如何将屏幕转发到我的共享列表屏幕以及另一个应用程序共享的数据如何访问它们的帮助。有什么帮助吗？

【参考方案1】：

仔细检查您的method 是"POST" 并且enctype 存在。 enctype 必须是 "multipart/form-data"，并且必须在清单中添加 files 条目，并在其中指定 share_target。 files 是一个数组，用于指定您的应用接受的文件类型。

更多信息来自：https://web.dev/web-share-target/

前台页面无法直接处理此数据。由于页面将数据视为请求，因此页面将其传递给服务工作者，您可以在其中使用 fetch 事件侦听器拦截它。从这里，您可以使用 postMessage() 将数据传回前台页面或将其传递给服务器：

    self.addEventListener('fetch', event => 
      const url = new URL(event.request.url);
      // If this is an incoming POST request for the
      // registered "action" URL, respond to it.
      if (event.request.method === 'POST' &&
          url.pathname === '/bookmark') 
        event.respondWith((async () => 
          const formData = await event.request.formData();
          const link = formData.get('link') || '';
          const responseUrl = await saveBookmark(link);
          return Response.redirect(responseUrl, 303);
        )());
      
    );