This post is also available in different formats so you can read on the go or share it around!
You can share myriad types of data but each operating system may handle content differently. The goal of the Web Share API is to show a more contextual menu based on the type of content. For example, if you were to share a video, a messaging app might be first followed by a list of relevant players, editors, etc.
Here's a list of common types, the exhaustive list can be found about shareable types on MDN.
- .avif - image/avif
- .gif - image/gif
- .jpeg - image/jpeg
- .jpg - image/jpeg
- .png - image/png
- .svg - image/svg+xml
- .tiff - image/tiff
- .webp - image/webp
- .mp4 - video/mp4
- .mpeg - video/mpeg
- .webm - video/webm
Support is a bit scattered. You won't be able to rely on it being supported in most cases so I advise doing progressive enhancement where at the very least there's some custom UI to achieve a similar result when the browser you're targeting doesn't support the Web Share API.
- Safari on macOS
- Safari on iOS
- Chrome on desktop only supports Web Share API on Windows and Chrome OS.
- Edge only supports it on Windows.
You see progress on Web Share API support on Can I use...
Here's an example of what it might look like as of 2022 in Safari on iOS and macOS.
The macOS list is pretty mundane, just showing a generic list of apps that support URLs. Safari on iOS however, shows a few more contextual choices such as messaging apps (have been blurred out for privacy) like Slack, WhatsApp and recent contacts. There are also some more custom intents surfaced by apps at the bottom including "Add to reading list" and "Save to Dropbox".
|Safari on iOS||Safari on macOS|
This is a cool feature we've come to expect on mobile devices, showing contextual apps to allow content to be consumed by. It's nice to see it make it's way to the web and I think it has a lot of potential but, right now it's not something you can fully rely on as it's not available across all browsers just yet. Once desktop browsers support it more widely, I think it will unify the sharing experience on the web. You won't have to create custom UI for an interaction that everyone uses and it will be more relevant to the user's interacting with your website or app.
As of 2022, it's safe to use in certain scenarios but there should always be a fallback UI and sharing experience. Hopefully someday soon, we'll see more widespread adoption of the Web Share API!