Exploring the Web Share API’s capabilities

The Web Share API allows websites to display a device’s built-in share sheet, giving the user the ability to natively share your website. Since the Web Share API is still relatively new and I want to integrate it into my websites, let’s explore how it works and its capabilities.

Web Share API example

The code below is an example of the API is action, displaying the share sheet when the button is clicked. This code should work with all websites as it uses non-platform specific data points. The text (description) parameter does require a meta field with the attribute name=”description” to work.

To see a working version of the Web Share API, click the Share button at the start of this post, next to the social icons.

<button id="device_shr_btn" style="btn">Share</button>
<script>
	document.addEventListener('DOMContentLoaded', function () {
		const title = document.title;
		const description = document.querySelector('meta[name="description"]').getAttribute('content');
        	const url = document.location.href;

        	const shareData = {
            		title: title,
            		text: description,
			url: url
        	};

        	const btn = document.getElementById('device_shr_btn');
        		btn.addEventListener('click', () => {
           		navigator.share(shareData);
        	});
    	});
</script>

Device behaviours

While testing out on my Framework laptop running Windows and Google Pixel, I noticed that both devices handle the information from navigator. share differently. Let me explain.

Windows

The Windows 11 share sheet displays the website’s home URL and the URL parameter. I have not been able to get the title or text parameters to display.

Android

The Android share sheet displays the text and URL parameter along with the website’s favicon. If the text parameter isn’t present the title is displayed as a fallback.

MacOS and iOS

I have not yet been able to test the behaviours of MacOS and iOS yet.