A Few Lines for Native Sharing
The Web Share API is one of those small standards that punches above its weight. It hands your page access to the platform’s native share UI, provided the browser supports it. The appeal is obvious: you skip the pile of share icons and third-party scripts and give users an interface they already know.
Support is selective, though. Desktop Chrome, for instance, doesn’t have it, while desktop Safari does. So the practical move is feature detection before you commit to rendering a share control. The detection itself is trivial:
if (navigator.share) {
}Once you know the API exists, wiring up a button takes only a few lines. One pattern is to grab content from the page, like the title and the first paragraph, and pass those strings along to the share call. That works on any article without hard-coding anything.
Jeremy Keith has pushed for an even lighter path: a declarative, JavaScript-free version of Web Share. The idea is to drop a share link or button into the markup and let the browser interpret it. For title and text, that could look like:
<button type="share"><button type="share" value="title,text">Comma-separated values in attributes are a bit awkward—what happens when a title contains one?—but that’s the trade-off for a simple, declarative default. If you need more control, the JavaScript API is still there. And if the browser lacks support, a polyfill can step in, falling back to a mailto: link so the button still does something useful.
That fallback is clever, but in production, I’d lean toward only rendering the share button when the API is genuinely available. Otherwise you're back to shipping UI that isn't doing what it promises.
