Web Share API: How to Share Contents Natively with JavaScript

Sharing contents online is as old as the internet and websites, and has been in use since then.

Social sharing has been a great way to promote your blog posts and let your readers discover you.

The evolution of social media websites has broadened the need to share content online, which has welcomed many social sharing services that allow internet readers to quickly share useful content with others. Basically, by listing social media accounts that a user can select and then redirects the user to the link provided for sharing by the social platform.

One clear fact here is that web sharing should not be limited to sharing only links to only websites. And this brings in another thought of making it possible for readers to share content beyond links and also to platform-specific applications. Here's why we have the JavaScript Web Share API.

The Web Share API

"This specification defines an API for sharing text, links and other content to an arbitrary destination of the user's choice."

W3C - Web Share API

The Web Share API allows sharing links, images, videos, and other contents to the corresponding platform-specific native apps on the device's operating system. On smartphones, this works much like the native sharing modal from apps.

It provides the navigator.share() API for this action. The share() method takes an object has an argument, which specifies the data to be shared and returns a promise that resolves or rejects if the share is successful or not.

Syntax

let promiseShare = navigator.share(shareData); // Returns a promise

The available properties are:

• url - A string representing a URL to be shared.
• text - A string representing the content body to be shared.
• title - A string representing the title of the content to be shared.
• files - A "FrozenArray" representing the array of files to be shared.

Sharing Links and Texts

To share links and texts, the navigator.share() API, provide the object argument with a url or link property or both. You can either share a text without a URL or vice versa, and can also share both. It's important to note that the method requires at least one property from the lists, if not, a TypeError will be thrown. See example below

navigator.share({    
    url: 'https://lyty.dev',    
    text: 'Read online tutorials and articles from lyty.dev',    
    title: 'Lyty.dev online tutorials'}).then(() => alert('Shared!')).catch((err) => `Oops! Some error: ${err} occurred, cannot share content.`);

The Web Share API is new, so in order to be sure if your readers' browser supports it, and to avoid the TypeError: navigator.share is not a function error, you can do a check:

 

if(navigator.share) {
    navigator.share({    
        url: 'https://lyty.dev',    
        text: 'Read online tutorials and articles from lyty.dev',    
        title: 'Lyty.dev online tutorials'})
    .then(() => alert('Worked!'))
    .catch((err) => `Oops! Some error: ${err} occurred, does not work.`);
}

Here is a live example of how the link sharing works from your OS, click the share button to test:

 

Sharing Files with the Web Share API

The share() method accepts a FrozenArray value for the files property to share files on the user's operating system. It is strongly advised that we check if the browser supports file sharing before implementing it, this can be done with the navigator.canShare() API this way:

if(navigator.share && navigator.canShare({files: arrayOfFiles})) {
    navigator.share({
        files: arrayOfFiles,
        text: 'Some fantastic picture!',
            title: 'Share a fantastic picture'})
    .then(() => alert('Picture sharing worked!'))
    .catch((err) => `Oops! Some error: ${err} occurred, picture sharing does not work.`);
    }

See live demo:

Here is a video demo in Chrome on Android.

Web Share API Limitations

Even though the Web Share API is powerful, it has some limitations to implementing it, here and a few things to consider when implementing it.

• It can only be used via an HTTPS website.
• It must be invoked from a user action such as click and not automatic.
• Different browsers have specific file extensions that are supported, see the permitted file extensions in Chromium browsers.

Browser Support

According to CanIUse, the Web Share API was first supported in Samsung Internet 8.2 released December 20, 2018. Since then, there have been staggering supports across modern browsers such as Chrome, Edge, and Firefox. See the support chart from CanIUse below.

Web Share API Demos

GoogleChrome Github repo has provided quite a number of interesting examples of how to use the Web Share API, visit the repo to learn more.