How to use web share API for native share options in Html & JavaScript?

JavascriptProgramming ScriptsWeb DevelopmentFront End Technology

In this tutorial, we will learn about web share API. Web share API is a JavaScript API, which allows user to share text, files, and images to the other apps which is available on the device.

Using this API, we can add share functionality to websites through the native share dialogue popup of the device.

API limitations and Feature

  • API is only available to web apps which is accessible using HTTPS.
  • Capable of sharing files, text, and URLs.
  • Web Share API is not available to older browsers, it supports only specific browsers (Chrome, Edge Safari, etc).
  • Can only be invoked after user action or an event.
  • Users can customize the share option which is available by default in the API.

Method to share links and text

Web API provides a promise-based share() method which takes an object as its property, this object can be anything like a URL, text, or files.

This API has two methods navigator.canShare() to check whether the object given is sharable and it returns Boolean and navigator.share() for sending.

Syntax

if(navigator.share){
   // yes navigator share function is avilable
} else{
   // share function is not avilable
}

So, this navigator.share() method provides native sharing functionality, and to invoke this method some UI event should happen.

Share API returns a promise and using .then() we can write desirable output in the pop-up dialogue box as the navigator share function will be available.

When the event will happen, assume you will click on the share button then the native picker will show a popup screen with target apps that support sharing data.

Remember − We should also handle browser compatibility; in case an older version of the browser web share API will not be available as it doesn’t support it.

Example

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> #BtnClick{ color: red; font-size: 20px; width: 120px; height: 50px; } #message_here{ color: blue; } </style> </head> <body style="text-align: center; margin-top: 200px; background-color:skyblue;"> <h1 style="font-family: cursive;">Web share api using html and javascript</h1> <h2>Click here to show web share navigator screen</h2> <button id="BtnClick"><i class="fa fa-share"></i> Share</button> <h2 id="message_here"></h2> <script> document.querySelector('#BtnClick') .addEventListener('click', event => { if (navigator.share) { navigator.share({ title: 'TutorialsPoint', url: 'https://www.tutorialspoint.com/' }).then(() => { document.getElementById("message_here").innerHTML="Thanks for sharing the message!"; }).catch(errror => { document.getElementById("message_here").innerHTML="Error occoured while sharing:!"; }); } else { document.getElementById("BtnClick").innerHTML="Your browser doesn't support the web share API"; } }) </script> </body> </html>

As we discussed if our browser is compatible with the API then it will be available which we check using if(navigator. share) else we will display an error showing Your browser doesn't support the web share API.

So, we saw how to use web share API using HTML and JavaScript.

raja
Updated on 11-Oct-2022 09:08:40

Advertisements