Getting started with the Web Share API

If you’ve ever built a website and needed the ability to share to a social network, you’ll know that it’s not as easy as it first seems. In order to add basic share functionality, you often need to include a third party script and become familiar with it’s API. Not to mention the fact that third party scripts can have a detrimental effect on the page load performance of your site. As you add more and more sharing links, you’ll quickly start to collect a lot of scripts.

As a web developer, I’ve always been jealous of the ability that native developers have that enables them to tap into the sharing capabilities of a device. Sharing between native apps on your device is so easy, but there isn’t any reason why it shouldn’t be easy for web developers!

This is where the Web Share API comes in. It is a simple API that allows websites to invoke the native sharing capabilities of the host platform directly from the web.

Let’s imagine the following example. A user reads an article on your site and thinks that it’s something that they want to share with their friends. When they click the social sharing buttons at the bottom of the screen, instead of opening another web page, they see a context menu that lets them share using their device’s capabilities.

Looking at the image above, you can see that when the user clicks on the share button, they are presented with a share dialog. Based on their choice, the user can then share with their chosen application.

At the time of writing this article, the Web Share API is currently in trial and only works on Android devices, but is available for you to start experimenting with. In order to get started, head over to chrome://flags/ and enable the "Experimental Web Platform features" flag. In order to get started, you’ll need to sign up for an Origin Trial token and add it to the web page that you want to experiment with. "Origin Trial" means this API is only available to sites that opt-in - you’ll need to register to get access during the trial phase. The Chrome team are looking for as much feedback as possible

Let’s get coding

Getting started is easier than you think! The Web Share API is a promise-based, single method API that takes an object with properties named title, text and url.

Let’s break this code down. Firstly, I am adding a check to ensure that the current browser supports the Web Share API. Next, I am invoking the share dialog and passing through a document title and share URL. Once the code has been executed, it will bring up the native dialog and allows the data to be shared by a native app chosen by the user.

Before we can start testing the functionality, we need to ensure that the site is running over HTTPS, as the API needs this in order for it to function. That’s it - If you now visit the page on an Android device and click on the share button, you should see something a little like the image below.

If you’d like to test the code in this example please head over to deanhume.github.com/web-share using your Android device. I’ve also created a Github repo with all of the code in this article, so feel free to fork and have a play for yourself!

What about browsers that don’t support the API?

The Web Share API is still an experimental feature and currently only works on Android devices, which is why it’s important to ensure that you provide the default functionality for browsers that don’t support it.

When using third party sharing scripts, my preferred method is to use social links rather than clunky libraries. Removing third-party social share scripts and using social share URLs will make your site leaner and faster. Using traditional share URLs aren’t without their drawbacks, but it’s up to you to decide how you’d like to implement this on your site!

Let’s take the basic example we used above and tweak it slightly to use the social sharing links for browsers that don’t support the Web Share API.

In the code above, I am firstly checking to see if the browser supports the Web Share API. Next I am adding an event listener to the share button. If a user clicks on the link, the code will check if the current browser supports this feature. If it does, then we check to see if the current page has a canonical link (this might be the preferred URL to share). If there is no canonical link, then we use the window.location.href as the URL.

Finally, if the Web Share API is not supported, the code simply falls back and the normal A tag links can be used to share the current URL.

Summary

The Web Share API is a great step forward for web developers because it gives the user control of how and where they share their with their installed apps. As adoption grows, hopefully this will mean less 3rd party scripts, more native sharing and ultimately a better experience for the user. Currently this feature is only available on Android, but it would be great to see this adopted by more operating systems. If you’d like to keep up to date on this API or learn more about it, I recommend checking out the Github repo for more information.