How to Use the Web Share API

How to Use the Web Share API

Learn how to use the Web Share API to give your web app a more native feel. Google and the Chromium team released a new API that enables us to share data from our web app the same way we do from our iOS and Android apps. The Web Share API is a game-changer.

Google and the Chromium team are advancing the web with new exciting features that bring native-like experiences to the online world.

Recently, they released a new API that enables us to share data from our web app the same way we do from our iOS and Android apps. The Web Share API is a game-changer.

The Web Share API makes it possible for web apps to share links, text, and files to other apps installed on the device in the same way as native apps.

Using the Web API

The Web Share API is available in the navigator object, as navigator.share(...) method.

navigator.share({
    title,
    text,
    url
})
.then(() => )
.catch((error) => )

The object’s properties are optional. Their usage depends on the context or app target you want to share it to.

Let’s see a simple example:

<html>
<title>
    Web Share API
</title>

<body>
    <div>
        <input type="text" placeholder="Enter text you wanna share" id="title" />
        <input type="text" placeholder="Enter the text you want to share here" id="text" />
        <input type="text" placeholder="Enter the URL" id="url" />
        <input type="file" id="file" />
        <button onclick="share">Share</button>
    </div>
</body>
<script>
    function share() {
        if (navigator.share) {
            navigator.share({
                    title: title.value,
                    text: text.value,
                    url: url.value,
                })
                .then(() => console.log('Successful share'))
                .catch((error) => console.log('Error sharing', error));
        } else {
            console.log("Web Share API is not supported in your browser.")
        }
    }
</script>

</html>

We have a simple app with inputs and a button. The inputs represent title, text, and url of the data we want to share. Then, we set up a share function, that calls the navigator.share with the appropriate object. We first checked for the share method availability in the navigator object. If it is not there we inform the user, that his browser doesn’t support the Web Share API. How to Use the Web Share API

How to Use the Web Share API

If we click on Whatsapp, for example, it will open up with your friends/group list to select one. If you click on one,

Whatsapp will send the data passed in the navigator.share(…) method to the selected friend.

Android developers will see that this Web Share API is the same as the Intent.ACTION_SEND in Android.

Sharing files (like media files)

We can share files like photos, audio, video, documents (pdf, doc, ppt, etc) using the Web Share API.

To share files, we pass a file property to the navigator.share input object:

navigator.share({
 file: [...]
})
...

The file property will hold the files blob in an array.

Let’s see an example:

<html>
<title>
    Web Share API
</title>

<body>
    <div>
        <div>
            <input type="text" placeholder="Enter title..." id="title" />
        </div>
        <div>
            <input type="text" placeholder="Enter the text..." id="text" />
        </div>
        <div>
            <input type="file" id="file" />
        </div>
        <div>
            <button onclick="shareFiles" id="shareFilesButton">Share Files</button>
        </div>
    </div>
</body>
<script>
    shareFilesButton.addEventListener("click", () => shareFiles())
    function shareFiles() {
        const files = [file]
        if (navigator.canShare && navigator.canShare({
                files: files
            })) {
            navigator.share({
                    title: title.value,
                    text: text.value,
                    file: files,
                })
                .then(() => console.log('Successful share'))
                .catch((error) => console.log('Error sharing', error));
        } else {
            console.log("Web Share API is not supported in your browser.")
        }
    }
</script>

</html>

We are using the canShare method to check for Web Share availability and also we use the canShare to check for a file type support:

if (navigator.canShare && navigator.canShare({
 files: files
 })) {
 ...
 }
 ...

We passed in the file blobs in the file property, this checks if we can share the particular file we selected from the input#file.

Not all file types are shareable using the navigator.share(…) API.

Back to our example, we passed the selected file from the input#file to an array. We constructed a literal object with properties we want to share, the file property was added here. This file property tells the Web Share that we are sharing file(s).

Finally, we call the navigator.share method with the object.

Now, when we select an app target (let’s say Whatsapp), the files in the files array will be sent to the friend we selected.

Check out my demo of the Web Share API

Browsers compatibility

This Web Share is not supported in all browsers.

Chrome browser from version 6.1+ supports only sharing text and links.

Chrome browser from 7.~ supports both sharing files, links, and text.

Conclusion

Native capabilities are increasingly being brought to our browsers. What native-like experience do you wish to see replicated in a web app? Drop your comments.

webdev api

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Top 10 API Security Threats Every API Team Should Know

Learn what are the most important API security threats engineering leaders should be aware of and steps you can take to prevent them

What Are Good Traits That Make Great API Product Managers

What is API product management and what can you be doing to be a better API product manager — get aligned with SaaS and enterprise software requirements. This guide lays out what is API product management and some of the things you should be doing to be a good product manager.

Consume Web API Post method in ASP NET MVC | Calling Web API | Rest API Bangla Tutorial

LIKE | COMMENT | SHARE | SUBSCRIBE In this tutorial, I will discussed about how to consume Web API Get method and display records in the ASP.NET View. Here, ...

Consume Web API Get method in ASP NET MVC | Calling Web API | Rest API Bangla Tutorial

LIKE | COMMENT | SHARE | SUBSCRIBE In this tutorial, I will discussed about How to Consume Web API Get method in ASP NET MVC. Blog : http://aspdotnetexplorer...

Consume Web API Put method in ASP NET MVC | Calling Web API | Rest API Bangla Tutorial

LIKE | COMMENT | SHARE | SUBSCRIBE In this tutorial, we learned how to consume Web API Get and Post methods in the ASP.NET View. Here, we will see how to con...