Share like native mobile apps with Web Share

Read Time:2 Minute, 38 Second

In this article we will check out how to share like native apps with the Web Share API. Web Share API has been around for some time and can add the great ability to your Mobile Web/PWA applications.

Using the Web Share API you can provide your users with native app like sharing dialog as shown below.

What you can share

URL’s

Files

You can share both URL’s with texts and also Files. However in the example covered in this article we will be focussing on the URL sharing.

Demo

I have a demo video of the whole experience. The code used to create this has been explained below.

https://youtube.com/watch?v=WW7vc4yEUSw%3Ffeature%3Doembed

Glitch Demo: https://sprout-sapphire-geese.glitch.me/

Example Code

Web Share API is made available with the navigator.share() method.

navigator.share(shareOptions);

The method accepts share options in the form of an object

const shareOptions = {
  title: 'Web Share Demo',
  text: 'Wanted to share this with you',
  url: 'https://josephkhan.me',
}

The object must contain at least one of the following properties: title, text, url or files. Or else it will throw an error.

The Web Share API returns a Promise which you can await on or use then/catch block. If the data is shared successfully the Promise resolves. Else the Promise rejects which can be handled in the catch block.

Let’s look at the full example below. Overall it is a simple API and very easy to use.

<!-- The HTML code -->
<h1>Native Web Share Example</h1>
<button id="shareBtn">Share</button>

<!-- The JavaScript code -->
<script>
  const shareBtnRef = document.querySelector('#shareBtn');
  shareBtnRef.onclick = async () => {
    //check if native sharing is available
    if(navigator.share) {
      try {
        const shareData = {
          title: 'Web Share Demo',
          text: 'Wanted to share this with you',
          url: 'https://josephkhan.me',
        }
        await navigator.share(shareData);
        console.log('Share successfull');
      } catch(err) {
        console.log('Error: ', err);
      }
    } else {
      console.warn('Native Web Sharing not supported');
    }
  }
</script>

You can have a look at the source from my Glitch example:

https://web.archive.org/web/20210613055619if_/https://glitch.com/embed/#!/embed/sprout-sapphire-geese?path=index.html&previewSize=0