Web Share API

Bharat Kalluri / 2020-10-13

With the web share API, web applications can utilize the system provided sharing capabilities. You can even read the spec in a couple of minutes.

Usage

  • The site must be served over HTTPS (localhost works for development)
  • Currently (as of 13 Oct 2020) the browser support is still not good. Most of the popular mobile browsers support it though.
  • The navigator.share method has to be called when the user does action (like button click). You cannot call the method directly (for example on page load).
  • It can share URLs, text or files

Let us look at an example

if (navigator.share) {
	// Share API available
	navigator
		.share({
			title: 'BharatKalluri.in',
			url: 'https://bharatkalluri.in',
		})
		.then(() => console.log('Shared successfully'))
		.catch((err) => console.log(err));
} else {
	// Fallback
}

navigator.share needs at least on of the following parameters: title, text, url or files. Desktop browsers largely lack support for the API. So a fall back is necessary.

That's about it, hopefully support for this API will land on all major browsers soon.

Spotify album cover