Safari 15增加了对Web Share 2级的支持
本周在WWDC上宣布的Safari 15测试版有很多东西需要解读，但对我个人来说，其中最突出的是采用了Web Share2级。最后，网络开发者将有一个简单的方法来使用原生共享对话从Safari向应用程序共享文件。我无法解释这对网络是多么重要。直到现在，把文件从一个网络应用中拿到一个本地应用中去并不容易。我给你一个场景。
比方说，我建立了一个生成动态图片的网络应用，我想把图片分享到Twitter。目前，我将指示用户下载图片，要么使用 "按住 "手势，要么利用最近推出的Safari下载功能。在这两种情况下，图片通常会出现在用户的照片库中，然后由用户去找那个文件并在Twitter上分享它。直接将图片分享到Twitter不是更有意义吗？
iOS 14.3增加了对MediaRecorder API的支持，允许我们在浏览器中动态地录制新的视频和音频。如果我建立了一个定制的相机应用，记录了用户的视频，并希望在Instagram故事上分享该视频，那该怎么办？在过去，我建立的系统需要用户_把视频通过电子邮件_发给自己，从他们的电子邮件应用程序下载到他们的照片库，最后分享到故事中。如果我可以简单地将动态视频直接分享到Instagram，那不是很好吗？
这就是Web Share level 2试图补救的地方。让我们来看看它是如何工作的。
使用网络共享2级来共享文件
网络分享第一级只允许我们分享链接，但回顾一下这个语法对了解增加文件分享是多么的容易。例如，如果我打算建立一个分享我的开发博客的按钮，它将看起来像这样。
if (navigator.canShare) {
当用户点击这个按钮时，原生的分享对话就会出现，同时出现的还有他们所有允许分享链接的应用程序。从这里，用户可以很容易地选择他们想分享的网址。
现在，如果我想在这个分享中添加一个图片呢？这就是网络共享2级的作用。首先，我们要创建一个文件数组，作为我们希望分享的 blobs。在这个例子中，我将只包括一张图片。我的图像生成应用程序通常使用来生成图像，因此我可以使用toBlob()方法将动态画布变成一个图像blob，然后从中初始化一个文件。最后，我可以将该文件放入一个数组。
canvas.toBlob(blob => {
let files = [file]
然后我可以把这个文件数组和我的其他数据一起传递给Web Share。
if (navigator.canShare && navigator.canShare({ files: files })) {
是的，我们所需要做的就是添加files参数。此外，我们可以通过使用canShare()方法来确保浏览器能够分享这些文件。就这样了。我只是建议你熟悉一下文件构造函数的方法，这样你就可以把你的图片、视频和其他内容变成所需的格式。
下一步是什么？
如果你对WebRTC、MediaRecorder和Web Share level 2如何在同一个应用程序中结合起来感到好奇，可以看看我制作的这个完整的相机用户体验的CodePen。注意：目前这只能在Safari 15测试版上运行。想了解我们最初是如何走到这一步的吗？请看这个Twitter主题。快乐的黑客行动!
相关故事
使用Web Share从iOS 15 Safari向应用程序共享文件最初发表于Bits and Pieceson Medium，在那里人们通过强调和回应这个故事继续对话。
