Explore the JavaScript API for invoking the native share dialogue. Share like a pro from a web application

Sharing button is one of the most used features online today. Every website article should have sharing button. While there are various tools and services offering this service, recently Javascript has added native support for sharing articles.

Did you know there’s a native share function you can bring with JavaScript?

In this tutorial, you would learn how to use the Web share API in your website or web app. Web Share API is an API that allows the user to share text, links, and other content of the user’s choice to other apps installed on the device in the same way as a native app. 

The Share() API

Begin by creating a JSON object with the data to be shared. Consider the following code snippet from the sample. It creates an object, thestacktechData with the fields, a title, description text and a URL.

const thestacktechData = {
      title: 'thestacktech',
      text: 'Using the native web share JavaScript API',
      url: 'https://www.thestacktech.com/using-the-native-web-share-javascript-api/'
    }

In the sample, share is invoked on clicking a button. The click handler invokes the JavaScript share() on the navigator object. You pass the data object created in the above snippet as a parameter. 

JavaScript native web share API

It’s important to note this system doesn’t work on every browser.

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');
}

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>

We can then fetch the button by its ID.

const shareButton = document.getElementById('share-button');

And attach a listener to it.

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

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://www.thestacktech.com/using-the-native-web-share-javascript-api/',
      })
      .then(() => {
        console.log('Callback after sharing');
      })
      .catch(console.error);
  } else {
    console.log('provide fallback share');
  }
});

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.

https://codepen.io/rebelchris/embed/jOzNadp?height=300&default-tab=html%2Cresult&slug-hash=jOzNadp&user=rebelchris&name=cp_embed_1

Web share API options

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://www.thestacktech.com/using-the-native-web-share-javascript-api/',
  files: [file],
});

Browser support

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

Important Points

Consider the following for implementing Web-Share

• Share cannot call on load. It needs to be explicitly invoked on a user action (like a button click)
• Share is supported only in a secure context. Share can only be used on HTTPS connection with a valid certificate.