DEV Community

Cover image for Using the native web share JavaScript API
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

Using the native web share JavaScript API

Did you know there is a native share function you can invoke with JavaScript?

You might have seen them around on the internet.
If not, I've added a video demonstration of how it looks.

Using the native web share JavaScript API

Interesting in adding this to your website?
Follow me along as we build it together.

JavaScript native web share API

It's important to note this method does not work on every browser, it's mainly built for mobile devices, but some desktop variants like Safari also support it.

Remember that you should always create your fallback share method when you use this.

The first thing we need to do is see if the current user has support for the navigator.

We can use the in method to check if the navigator holds the share functionality.

The code to determine it looks like this:

if ('share' in navigator) {
  console.log('native share available');
} else {
  console.log('provide fallback share');
}
Enter fullscreen mode Exit fullscreen mode

Now we can go ahead and add a button to our webpage that we can attach a click to.

<button id="share-button">Share me</button>
Enter fullscreen mode Exit fullscreen mode

We can then fetch the button by its ID.

const shareButton = document.getElementById('share-button');
Enter fullscreen mode Exit fullscreen mode

And attach a listener to it.

shareButton.addEventListener('click', (event) => {
  // Do the share action
});
Enter fullscreen mode Exit fullscreen mode

Inside this function, we can invoke the native share or use our fallback share mechanism.

shareButton.addEventListener('click', (event) => {
  if ('share' in navigator) {
    navigator
      .share({
        title: 'Look at this native web share',
        url: 'https://daily-dev-tips.com/posts/using-the-native-web-share-javascript-api/',
      })
      .then(() => {
        console.log('Callback after sharing');
      })
      .catch(console.error);
  } else {
    console.log('provide fallback share');
  }
});
Enter fullscreen mode Exit fullscreen mode

Let's take a closer look at what's going on here.

  • We attach a click handler to our button
  • We check if we have the native share option
    • Yes: We invoke it with a title and URL
    • No: We should provide some fallback

As you can see, we can even attach callbacks to our native share API.
You might want to use it to thank the user for sharing or logging some analytics event.

If you are interested, you can try it out on this CodePen.

Web share API options

In our example, we set the title and URL option. Let's see what else we can provide.

The web share API accepts the following options:

  • title: a string that represents the title (may be ignored by the shared platform)
  • URL: the URL of the sharable link
  • text: a string representing some information about the share action
  • files: an array of files it supports quite a wide variety of file options

In total you could provide a object like this:

const file = new File([blob], 'picture.jpg', { type: 'image/jpeg' });

navigator.share({
  title: 'Web Share',
  text: 'Testing out the web share API',
  url: 'https://daily-dev-tips.com/posts/using-the-native-web-share-javascript-api/',
  files: [file],
});
Enter fullscreen mode Exit fullscreen mode

Browser support

Not all systems support this feature. However, most mobile browsers will support it.

Generally, it's recommended to have a custom fallback modal for the share options.




Data on support for the web-share feature across the major browsers from caniuse.com

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Top comments (21)

Collapse
 
tqbit profile image
tq-bit

Well I'll be damned this looks like a cool api to use. Hope it'll soon receive more browser support.

Thanks a lot for sharing (y)

Collapse
 
dailydevtips1 profile image
Chris Bongers

Yep!
Pretty cool to use and your giving the end user a native feel, which is always a bonus.

Collapse
 
krishnaagarwal profile image
Krishna Agarwal

Amazing post as always!

Collapse
 
dailydevtips1 profile image
Chris Bongers

Thanks Krishna πŸ₯³

Collapse
 
rafaelcg profile image
Rafael CorrΓͺa Gomes

That's amazing, thank you for sharing it!

Collapse
 
dailydevtips1 profile image
Chris Bongers

Glad you enjoyed this Rafael πŸ₯³

Collapse
 
lukeecart profile image
Luke Cartwright

Thank you very much for sharing!
Excuse the pun πŸ˜…

Collapse
 
dailydevtips1 profile image
Chris Bongers

Haha love it Luke. πŸ˜‚

And you are welcome πŸ’ͺ

Collapse
 
timhuang profile image
Timothy Huang

Cool! It’s easy to call sharing url from web browser. Thanks for sharing.

Collapse
 
dailydevtips1 profile image
Chris Bongers

Glad you enjoyed it Timothy πŸ™

Collapse
 
tony199555 profile image
Tony Yu

I am surprised that Safari has full support of web share API before any other major browser lol.

Thanks for sharing (:wink)

Collapse
 
dailydevtips1 profile image
Chris Bongers

Yeah crazy to think Safari does it out of all the modern browsers πŸ˜‚

Collapse
 
leeuw profile image
leeuw

amazing!! thanks πŸ‘

Collapse
 
ra1nbow1 profile image
Matvey Romanov

So great. Thank you

Collapse
 
dailydevtips1 profile image
Chris Bongers

Happy to you enjoyed it Matvey πŸ₯³

Collapse
 
mrcaidev profile image
Yuwang Cai

Not supported yet on the latest Chrome (103) :( Hope browsers could catch up soon. Thanks for sharing!

Collapse
 
dailydevtips1 profile image
Chris Bongers

Yep, well I personally think for browsers it's fine, for mobile is where it really shines.
I still kind of like that we can have our own more advanced fallback on desktop.

Collapse
 
fayomihorace profile image
Horace FAYOMI

That is great, thanks for sharing the share feature ^_^.

Collapse
 
dailydevtips1 profile image
Chris Bongers

Glad you enjoyed it πŸ’–

Collapse
 
sebadopico profile image
sebadopico

Amazing post

Collapse
 
dailydevtips1 profile image
Chris Bongers

Thank you πŸ™