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

问题描述

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

解决方法

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

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

前台页面无法直接处理此数据。由于页面将数据视为请求,因此页面将其传递给 Service Worker,在那里您可以使用 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);
        })());
      }
    });