BT

InfoQ Homepage News First Look at the Web Share API: Exposing the Native Device Sharing Capabilities to the Browser

First Look at the Web Share API: Exposing the Native Device Sharing Capabilities to the Browser

Bookmarks

The Web Share API exposes the native device sharing capabilities to a browser, providing a way to trigger the share dialog of a device when a user browsing a site wants to share the content via, for example, email or social media. The API was originally designed for mobile devices but also works on OS X (using Safari).

The web share API exposes a single method -- navigator.share() -- that accepts an object with three properties: URL, text, and title. It returns a Promise that resolves once the user completes the share action.

Once the share API is called, a native sharing window is opened, and a list of available sharing targets is displayed to the user.

Using the native sharing process provides a significant advantage to websites, as it exposes a familiar interface to the user, skips the need to sign in to multiple social networks, and provides new sharing targets that were previously unavailable the browser.

To avoid abuse, the web share API does come with a few restrictions. Your website must be served over HTTPS, and sharing must be triggered by a user action, for example, via a click. 

An example of a simple sharing process looks like this:

document.querySelector('.sharebtn').addEventListener('click', shareSite)

function shareSite() {
    navigator.share({
        title: document.title,
        text: 'Hello World',
        url: 'https://mewebsite.com',
    })
    .then(() => {
        console.log('Share completed successfuly')
    })
    .catch((error) => { console.log(`share failed: ${error}`) });        
}

 

The current version of the web share API only includes the ability to share URLs. Additional features, including the ability to share files with other applications, will be added when Web Share API level 2 is released.

The Web Share API level 2 is currently in active development within Chrome. You can follow it's progress on the Chrome status website

Rate this Article

Adoption
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

BT

Is your profile up-to-date? Please take a moment to review and update.

Note: If updating/changing your email, a validation request will be sent

Company name:
Company role:
Company size:
Country/Zone:
State/Province/Region:
You will be sent an email to validate the new email address. This pop-up will close itself in a few moments.