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. It allows developers to perform sharing capabilities easily within their websites and app. This is very useful in Progressive Web Apps because of its native feel. One good thing about the API is that you don’t need to have numerous buttons for different use cases, just one button would do.
To use this API you have to have a basic understanding of JavaScript.
Important things to note:
- Your website or app must support HTTPS.
- The API can only be invoked on a user action like a click.
The Web Share API only works on some browsers, because it isn’t supported on all browsers yet. You should check if your user’s browser is eligible to use the API. If it doesn’t support, then you should add a fallback method or inform the user. You can check the supported browsers below:
Photo credit: caniuse.com/web-share
To check if your browser supports the Web Share APIs, use the code below:
if (navigator.share) {
console.log("yeah...please continue");
} else {
console.log("Oops...I don't support this");
}
In the code above, the browser displays “yeah…please continue” in the browser if it is supported by the browser and “Opps…I don’t support this” if it doesn’t. This is important because if it doesn’t, the user won't be able to share using the API. You should create a fallback for users unable to use the API.
Using the Web Share API Using the API is very easy to use as the only thing you need is the navigator method. The navigator.share method takes in an object and gives a promise. The object must-have properties of either text, files, URL, and title.
URL, title or text value should be such that after reading these, the user with whom the link is shared should get a basic idea of the website.
Example:
navigator.share ({
title = "title of web app',
url = 'www.url.com',
text = ' This should be a descriptive text of your choice'
})
.then(() => console.log('shared successfully')
.catch((error) => console.log('sharing failed', errror));
Okay, so now that we have gotten down to the basics, let’s put everything together and see how it works.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Share API test demo</title>
</head>
<body>
<h1>Lets practice what we just learned about Web share API</h1>
<h3>Click the button below to share:</h3>
<button id="shareNow">Share</button>
</body>
<script>
const button = document.querySelector('#shareNow');
button.addEventListener("click", share);
function share() {
if (navigator.share) {
console.log("yeah...please continue");
navigator.share({
title : "Web Share API demo",
url : window.location.href,
text : ' This is just a test'
})
.then(() => console.log('shared successfully'))
.catch((error) => console.log('sharing failed', errror))
}else {
console.log("Oops...I dont support this");
}
}
</script>
</html>
In the code sample above, we created an HTML file and added a script tag that houses all our JavaScript. I recommend you separate them into two separate files.
The HTML body has 2 heading tags with text and a button. The button is what we are interested in.
We added an ID to the button and in the script tag, we added a click event using the DOM so that on every click, the API is invoked. Without this, the API wouldn’t work.
We created a function that is called when the button is clicked and we added a console message just to ensure the click event works.
When the function is called, the navigator.share method is used to display the title, text, and URL of the page with other share options and the user is able to share to one of the options.
And voila! we have been able to add a share feature to our site.