This post is also available in different formats so you can read on the go or share it around!
The Web Share API is an API accessible in the web via JavaScript that allows you share content easily. It brings up a native dialog (presented by the operating system your on) that can be catered to the type of content you're sharing.
What common types of content does the Web Share API support?
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.
Documents
- .css
- .csv
- .html
- .txt
Audio
- .flac
- .m4a
- .mp3
- .ogg
- .wav
Images
- .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
Video
- .mp4 - video/mp4
- .mpeg - video/mpeg
- .webm - video/webm
What browsers does this work on?
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.
Good support
- Safari on macOS
- Safari on iOS
Web Share on Android
- Chrome
- Firefox
- Samsung
Partial support
- 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...
What does the sharing menu look like?
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 |
|---|---|
 |  |
Thoughts on the Web Share API
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!
