我经常说过，为了使Web应用程序在应用程序世界中有效竞争，需要将它们集成到用户期望应用程序存在的所有位置。应用程序间通信是Web平台上最主要的缺失部分之一，特别是最后一个主要的缺失功能是本机级共享：Web应用程序需要能够将数据从其单独仓库中获取，并传送到其他网站和应用程序中；他们还需要能够从其他本机应用程序和站点接收数据。
File Share Target API是ChromeCanary中API的改变游戏规则。该API扩展了Web Share TargetAPI，该API通过将应用程序和网站集成到系统共享功能中，使应用程序和网站共享与网站的简单链接和文本。
这个非常静态的文件博客使用了Web Share Target API，因此我可以从任何Android应用程序中快速共享对它感兴趣的链接，从上周开始，我启用了File Share Target API，以便可以直接从Android上的相机应用程序。这篇文章全是关于它如何标识的（并从Jake Archibald那里窃取了一些代码-待他发现很多错误后，他们正在将它们集成到squoosh.app中。）
File Share TargetAPI是一个非常新颖的API，因为它是完全渐进的。如果您的应用程序可以处理Form POST请求，那么您可以轻松地与此API集成。基本流程是：当用户从本机选择器中选择您的应用程序时，Chrome会将Form POST请求发送到您的服务器，由您决定（使用服务工作者或在服务器上处理）。
要添加对将文件共享到Web应用程序的支持，您需要做两件事：
清单向主机系统声明应如何将共享从主机应用程序映射到Web应用程序。在下面的清单中，它基本上表示＆＃34;当用户共享类型为＆＃39; image / *＆＃39;的文件时。向// share / image /＆＃39;发出表单POST请求并命名数据＆＃39;＆＃39;＆＃34;。
{＆＃34; name＆＃34 ;:＆＃34; Blog：分享图片＆＃34 ;，＆＃34; short_name＆＃34 ;：＆＃34; Blog：分享图片＆＃34 ;、＆＃34; start_url＆＃34 ;：＆＃34; / share / image /＆＃34 ;,＆＃34; theme_color＆＃34 ;:＆＃34;＃000000＆＃34 ;,＆＃34; background_color＆＃34 ;:＆＃34;＃000000＆ ＃34;，＆＃34; icons＆＃34;：[{＆＃34; sizes ## ::＆＃34; 192x192＆＃34;，＆＃34; src＆＃34 ;：＆＃34; / images / me .png＆＃34;，＆＃34; type＆＃34 ;：＆＃34; image / png＆＃34; }]，＆＃34; share_target＆＃34;：{＆＃34; action＆＃34;：＆＃34; / share / image /＆＃34;，＆＃34;方法＆＃34;：＆＃34; POST＆ ＃34;，＆＃34; enctype＆＃34;：＆＃34; multipart / form-data＆＃34;，＆＃34; params＆＃34;：{＆＃34; files＆＃34;：[{＆＃34 ; name＆＃34 ;:＆＃34; file＆＃34 ;,＆＃34; accept＆＃34 ;: [＆＃34; image / *＆＃34;]}]}}}，＆＃34; display＆＃34; ：＆＃34;独立＆＃34 ;，＆＃34; scope＆＃34 ;：＆＃34; / share /＆＃34;}
用户共享到您的Web应用程序后，Chrome就会使用文件数据作为有效负载向您的网站发出Web请求。
建议您在服务工作者内部处理POST请求，以便1）快速，2）无法适应网络。您可以执行以下操作：
onfetch =异步（事件）=> {if（event。request。method！==＆＃39; POST＆＃39;）return; if（event。request。url。startsWith（＆＃39; https：//paul.kinlan.me/share/image/'）=== false）返回； / *这是为了解决杰克发现* /事件的问题。 responseWith（Response。redirect（＆＃39; / share / image /＆＃39;））;事件。 waitUntil（async function（）{const data = await event。request。formData（）; const client = await self.clients.get（event.ResultingClientId || event.clientId）; //从命名元素＆＃获取数据39; file＆＃39; const file = data。get（＆＃39; file＆＃39;）;控制台.log（＆＃39; file＆＃39 ;, file）;客户端postMessage（{file，action：＆＃ 39; load-image＆＃39;}）;}（））;};
将数据发送到打开的窗口（这是我们在第一点将用户重定向到的UI）。
完全由您决定如何处理已发布到服务人员的数据，但是对于我的应用程序，我需要直接在UI中显示它，因此我必须找到用户正在使用的窗口并postMessage数据那里。
航海家。 serviceWorker。 onmessage =（事件）=＆gt; { 安慰。日志（事件）; imageBlob =事件。数据。文件; //使用已共享的数据更新UI。 imageShare。 src = URL。 createObjectURL（imageBlob）;};
就是这样。如果您已经具有用于Web表单的API终结点，那么这是您可以对网站进行的简单但功能强大的添加。
Web Share Target API极其强大的平台原语，打破了Web应用程序在其宿主平台上遇到的另一个障碍。 我们希望人们能够在网络上获得最佳体验，而不必安装本机应用程序或在围墙花园中生产内容。 我们的团队尝试通过支持每个Chrome版本，为web.dev上的开发人员提供支持的丰富内容，为MDN做出贡献，帮助改善浏览器的兼容性以及一些最佳的开发人员工具（例如Lighthouse），使开发人员更容易在Web上进行构建 ，Workbox和Squoosh仅举几例。