Web API's is one of the most kept open secret in Web development. You hardly see it in text or any forum post. If you have used document.querySelector() or document.getElementById to interact with HTML element, you have made use of Web API's. Web API's are used typically with JavaScript but it can be used with any programming Language. There are many many Web APIs available and it can be daunting going through each one. From media streaming to HTML drag and drop, Web API's are available. One thing is sure, Web API's will take your web development skills to another level.
In this post and subsequent ones, I will demonstrate Web API's fuctionality. I will start with Web Share API for sharing text,links, files and any content to any selected target.
Prerequisite: HTML, Javascript
Objective: To famailarise readers with Web Share API
The Web share API has two methods
1. navigator.canShare() method to validate data is shareble.
2. navigator.share() method invokes the native sharing mechanism of the underlying operating system.
I will use the HTML skeleton below to demonstrate Web share API at work.
<html>
<head>
<title>Share page </title>
</head>
<body>
<div class="share">
<h1 class="groupH">SHARE DONATION LINK</h1>
<p class="groupP">Share a link to family and friends to make DONATION to your alma mata</p>
<button class="btn-secondary share-link" type="submit" onclick="shareLink()">SHARE DONATION LINK</button>
</div>
<script type="text/javascript">
const shareData = {
title: 'Donation',
text: 'Donation for my Alma matter',
url: 'http://localhost:3080/share'
}
const shareLink = async (event) => {
try {
await navigator.share(shareData)
console.log('Donation shared successfully')
} catch (err) {
console.log(err)
}
}
</script>
</body>
<html>
In the script tag, I created a javascript object shareData that has the web page link I want to share. I called navigator.share() with the shareData as parameter inside the shareLink function. When a user clicks the Share Donation Button, the operating system sharing mechanism will be triggered.
Finally
As demonstrated above, Web API's makes web development easy. In my next post, I will demonstrate how to use Web Share API to share files.
Like and comment, if you find this post educative.
Top comments (0)