Share like native mobile apps with Web Share

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.

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:

Some observations I made

• Web Share can only be used on a site that supports HTTPS.
• You can only trigger the Share dialog as a result of a user action such as a button click.
• Demo from the localhost works on Desktop Safari browsers.
• Demo from the localhost does not work on Android Chrome and iOS Safari simulators.
• Demo from my Glitch example does not work on Safari on iOS simulators. But works on Android emulator Chrome.
• Demo from my Glitch example works on real iPhone and Android devices (as expected).

localhost works on Desktop Safari browser:

Browser Support

Here is the browser support data from caniuse. Web Share API is meant for mobile devices and as such it is primarily supported on mobile browsers.

References

MDN Docs — here.

Cheers! Have a good day!!

If you enjoyed this post and want similar articles to be delivered to your inbox directly, you can subscribe to my newsletters or visit my website below.

Joseph Khan | I am a web enthusiast, author & speaker.

Say me a Hi on Twitter!

Joseph Khan

Originally published at https://josephkhan.me on May 25, 2020.