Web Share API

The Web Share API invokes the platform-specific sharing mechanism of the device, allowing data such as text, a URL, or files from a web application to be shared with any other application, such as mail clients, messaging applications, and more.

The method called to share data is navigator.share(). The navigator.share() method accepts an object containing the data to share and returns a Promise. Not every file type can be shared, though, and the navigator.canShare() method can test a data object to see if the browser can share it. You can see the list of shareable file types on MDN.

After calling navigator.share(), the browser will open a platform-specific sheet where users select which application to share the data with.

Additionally, the Web Share API can only be triggered by a user's interaction with the page, such as a button click; the Web Share API cannot be called arbitrarily by executed code.

The Web Share API is available on modern versions of Chrome, Edge, and Safari. For Chrome, though, it is only supported on Windows and ChromeOS.

Web Share Example

export default function WebShareButton() {
  const onClick = async () => {
    if ("canShare" in navigator) {
      await navigator.share({
        url: window.location.origin,
      });
    } else {
      alert("navigator.canShare() not supported");
    }
  };

  return <button onClick={onClick}>Share this site!</button>;
}

Usage

The Web Share API shrunk in usage from 9.00% in 2021 to 8.84% in 2022 on desktop. On mobile, usage shrunk from 8.58% in 2021 to 8.36% in 2022. As a result, this year, the Web Share API was the second most used API on both desktop and mobile, falling behind the Async Clipboard API—last year's second most used API.

On many sites, you can find the Web Share API in use. For example, social media platforms, documentation sites, and others use it as a great way to share content. Some examples where you can find the API in use include web.dev and twitter.com.

Description of Figure 2

Sharing a Twitter profile using the Web Share API.

Figure 2. Sharing a Twitter profile using the Web Share API.