I think the Web Share API is very cool (here’s our coverage). In a nutshell, it taps into the native sharing features on whatever platform you’re on, if that platform supports it.
I like this:

A heck of a lot more than these things:

Why?
- The Web Share API is just a couple of lines of code. Easy! No images, no weighty JavaScript or iframes, no chance of going out of date (cough, Google+).
- The UI that users see is customized to their platform and perhaps even customized by them to have the things they want in it.
Good job, web standards.
But it’s not supported everywhere. For example, I’m writing this blog post in Chrome, and it doesn’t work in desktop Chrome. But it does work in desktop Safari!

So if I’m going to use it, I’d rather test for support before plunking the button on a page. It’s very easy:
if (navigator.share) {
}
Here’s an example where I plop a <button>
onto an article, should that API be supported:
That JavaScript does a little fancy dancing to grab the title and first paragraph of the post to use in the API. I like how Jeremy Keith does it at the page level:
if (navigator.share) {
navigator.share(
{
title: document.querySelector('title').textContent,
text: document.querySelector('meta[name="description"]').getAttribute('content'),
url: document.querySelector('link[rel="canonical"]').getAttribute('href')
}
);
}
You could just pass in strings to those values too. This is just showing off how you might do things dynamically that work on any page.
Jeremy has also been on a kick advocating for a JavaScript-optional version of the Web Share API, which he thinks could work like this:
<button type="share">
And then, for specifying title and text:
<button type="share" value="title,text">
That feels a little funky to me, with the comma. What if the title has a comma in it? And what about specifying the URL? Could we split them all up into attributes? I think I know what Jeremy would say: this is a simple declarative version. If you’d like to change the default behavior, that’s what JavaScript is for.
But also, should it be there at all if the browser doesn’t support it? Well sure, if you polyfill it:
This polyfill turns the button into a mailto:
experience if not supported. That’s pretty clever. I think if I was production-bound, I’d probably only slip the button in when the feature is truly supported.
Woah, woah, woah! Using the value attribute for the title and text was just me spitballing. I dropped that idea pretty quickâas you say, it’s a bit funky. I’ve written up an explainer for the idea of
button type="share"
and the value attribute does not make an appearance. The title and URL are gathered by the browser (in the same way they gather them for bookmarking).I have been using Web Share API quite frequently in my Angular Projects. I just have one concern: Desktop Chrome :(
Nikhil, would you mind sharing your use cases here?
“perhaps even customized by them”
I wish… share menu is a complete mess
I find it difficult to transfer video from an event. 1.9GB
Under the desctop to check if the button appears, the chrome flag can be set in chrome://flags/#enable-experimental-web-platform-features
It only shows the button that will appear when the browser is mobile but there will be no action.
I walked around incompatibility differently more at -> ShareButton.js
Doesn’t appear to work on Firefox Mobile, although the recent Fenix update broke a lot of things, so that’s no surprise.
On Firefox, the share button appears, but nothing happens when tapped.
I have followed your site for years, and WeShare API for the last couple months. It is a great improvement for mobile UX, and will hopefully get even better when Safari iOS enables file sharing via WeShare API by default, it’s enable in Chrome Mobile. Our world revolves around media and Apple disabled file sharing by default in latest Safari 14 update.
As always, awesome article, Chris :)
I’ve been playing around with this API for a while now and, due to that same pain of not being able to use it in desktops, I created this polyfill:
https://www.npmjs.com/package/share-api-polyfill
It’s quite small in the end and works smoothly in desktops and mobile (using the native api whenever it’s available).
It also supports multiple languages and is growing thanks to community PRs :)
It feels to me like we’re just cluttering our UIs by adding all these extra “share” buttons. I understand that some users don’t know to tap on the hamburger icon and tap “share”, but I would like to see us move away from all these sharing buttons. At least this API brings us in the right direction with a more unified approach to sharing.
Please can you give me an example how to use an image stored in a folder for web share image and text?