Sharing Files from iOS 15 Safari to Apps using Web Share

Safari 15 adds support for Web Share level 2

There’s so much to unpack in the Safari 15 beta which was announced at WWDC this week but one standout for me personally is the adoption of Web Share level 2. Finally, web developers will have an easy to way to share files from Safari to applications using the native share dialogue. I can’t begin to explain how important this is for the web. Up until now, getting a file from a web app to a native app was not easy. I’ll give you a scenario.

Let’s say I’ve built a web app that generates dynamic images and I’d like to share that image to Twitter. Currently, I would instruct the user to download the image, either using the “press and hold” gesture or by utilizing the recently introduced Safari download functionality. In either case, the image usually ends up in the user’s photo library and it is up to the user to then go to that file and share it on Twitter. Wouldn’t it make more sense to simply share the image directly to Twitter?

Here’s another scenario. iOS 14.3 added support for the MediaRecorder API which allows us to dynamically record new videos and audio in the browser. What if I built a bespoke camera app which recorded a video of the user and wanted to share that video on Instagram stories? In the past, I’ve built systems that require users to email the video to themselves, download it from their email app to their photo library, and finally share it to stories. Wouldn’t it be nice if I could simply share that dynamic video straight to Instagram?

This is what Web Share level 2 attempts to remedy. Let’s take a look at how it works.

Using Web Share level 2 to Share Files

https://medium.com/media/214c7f6d35eb8a5db1a15601646986b7/href

Web Share level 1 only allowed us to share links but it is helpful to look back on that syntax to understand how easy it is to add file sharing. For example, if I was going to build out a button which shared my dev blog, it would look like this.

if (navigator.canShare) {
  navigator.share({
    title: 'Lee Martin',
    text: 'Netmaker. Playing the Internet in your favorite band for nearly two decades.',
    url: 'https://leemartin.dev'
  })
  .then(() => console.log('Share was successful.'))
  .catch((error) => console.log('Sharing failed', error));
}

When a user clicks on this button, the native share dialogue would appear along with all of their apps which allow link sharing. From here, the user can easily choose where they would like to share the url.

Now, what if I wanted to add an image to this share? That’s where Web Share level 2 comes in. First, we’ll want to create an array of the files as blobs we wish to share. In this example, I would only be including a single image. My image generation apps typically use <canvas> to generate images so I can use the toBlob() method to turn the dynamic canvas into an image blob and then initialize a file out of it. Finally, I can place that file into an array.

canvas.toBlob(blob => {
  let file = new File([blob], "image.jpg", {
    type: "image/jpeg"
  })

  let files = [file]
}, "image/jpeg")

I can then pass this files array to Web Share along with my other data.

if (navigator.canShare && navigator.canShare({ files: files })) {
  navigator.share({
    title: 'Lee Martin',
    text: 'Netmaker. Playing the Internet in your favorite band for nearly two decades.',
    url: 'https://leemartin.dev',
    files: files
  })
  .then(() => console.log('Share was successful.'))
  .catch((error) => console.log('Sharing failed', error));
}

Yep, all we need to do is add the files parameter. In addition, we can make sure the browser is capable of sharing the files by using the canShare() method. And that’s about it. I would just suggest familiarizing yourself with the File constructor methods so you can turn your images, videos, and other content into the required format.

What next?

If you’re curious about how WebRTC, MediaRecorder, and Web Share level 2 can all come together in the same app, check out this CodePen I put together of a full camera user experience. Note: This will only work on the Safari 15 beta at the moment. Want to learn how we got here in the first place? Check out this Twitter thread. Happy hacking!

Using Web Share level 2 to Share Files

if (navigator.canShare) {
  navigator.share({
    title: 'Lee Martin',
    text: 'Netmaker. Playing the Internet in your favorite band for nearly two decades.',
    url: 'https://leemartin.dev'
  })
  .then(() => console.log('Share was successful.'))
  .catch((error) => console.log('Sharing failed', error));
}

canvas.toBlob(blob => {
  let file = new File([blob], "image.jpg", {
    type: "image/jpeg"
  })

  let files = [file]
}, "image/jpeg")

I can then pass this files array to Web Share along with my other data.

if (navigator.canShare && navigator.canShare({ files: files })) {
  navigator.share({
    title: 'Lee Martin',
    text: 'Netmaker. Playing the Internet in your favorite band for nearly two decades.',
    url: 'https://leemartin.dev',
    files: files
  })
  .then(() => console.log('Share was successful.'))
  .catch((error) => console.log('Sharing failed', error));
}

Yep, all we need to do is add the files parameter. In addition, we can make sure the browser is capable of sharing the files by using the canShare() method. And that's about it. I would just suggest familiarizing yourself with the File constructor methods so you can turn your images, videos, and other content into the required format.

Safari 15 adds support for Web Share level 2

Using Web Share level 2 to Share Files

What next?

Related Stories

Related Posts