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

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

Last Updated : 26 Jul, 2024

Web Share API is a JavaScript API that allows websites to share text/URL/file through device's native share dialog by integrating with the OS. It works only with mobile devices and limited browsers. It was first introduced in Chrome 61 for android.

Features of web share API:

Capable of sharing URL, plain text or files.
Native, user-friendly and user-customized share dialogs.
Less code and OS managed UI. (Developer doesn't need to handle dialog manually)
Wide range of sharing options. (Developer doesn't have to worry about.)

Limitations of web share API:

Supported only on specific browsers and devices. (Advised to add a fallback to prevent compatibility issues)
Available only via HTTPS.
To prevent mishandling, It can be triggered only in response to some user action e.g. click

Note: Web share API is not supported on desktops and over non-HTTPS protocols. Hence, it is necessary to serve webpages over HTTPS in order to use it.

Example:

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        How to use web share API for native 
        share options in HTML and JavaScript?
    </title>
</head>

<body style="text-align: center;">
    <h1 style="color: green;">GeeksforGeeks</h1>

    <h2>Web Share API Demonstration</h2>

    <button id="shareBtn">Share</button>

    <script>
        document.querySelector('#shareBtn')
        .addEventListener('click', event => {

            // Fallback, Tries to use API only
            // if navigator.share function is
            // available
            if (navigator.share) {
                navigator.share({

                    // Title that occurs over
                    // web share dialog
                    title: 'GeeksForGeeks',

                    // URL to share
                    url: 'https://geeksforgeeks.org'
                }).then(() => {
                    console.log('Thanks for sharing!');
                }).catch(err => {

                    // Handle errors, if occurred
                    console.log(
                    "Error while using Web share API:");
                    console.log(err);
                });
            } else {

                // Alerts user if API not available 
                alert("Browser doesn't support this API !");
            }
        })
    </script>
</body>

</html>

Output:

Reference: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share

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

omkarphansopkar

Improve

Article Tags :

Similar Reads

How to activate web share using react-web-share in ReactJS ?

Activating Web share using react-web-share in ReactJS enables the sharing of specific data from one webpage/ browser. Using the social share button user can share their content on different social media sites.Prerequisites:React JSNPM and Node.jsApproach: To add our Social Share buttons we are going

How to add WhatsApp share button in a website using JavaScript ?

WhatsApp is the most popular messaging app. This article describes how you can add the WhatsApp share button to your website. In this example we make a simple website that uses a Whatsapp share button when you click on it will open on the Whatsapp app on your system and your message was already prin

JavaScript - How to Return Current URL for Share Button?

In this article, we will learn how to create share buttons on websites, allowing users to share a post or the URL of the site on various social media platforms. We will break this down into simple steps for better understanding.Step 1: Create the HTML StructureFirst, we need to create an HTML file t

How to connect to an API in JavaScript ?

An API or Application Programming Interface is an intermediary which carries request/response data between the endpoints of a channel. We can visualize an analogy of API to that of a waiter in a restaurant. A typical waiter in a restaurant would welcome you and ask for your order. He/She confirms th

How to add Google map inside html page without using API key ?

There are two ways to add google maps inside HTML page: Using API key Without using API key To learn first case you can follow the article while to learn other one follow this article. To insert google map inside the HTML page, follow the steps: Go to the google maps and search your desired location