Web Share API

This example shows a basic share operation. In response to a button click, this JavaScript code shares the current page's URL.

shareButton.addEventListener("click", async () => {
  try {
    await navigator.share({ title: "Example Page", url: "" });
    console.log("Data was shared successfully");
  } catch (err) {
    console.error("Share failed:", err.message);
  }
});

Note that a url of '' refers to the current page URL, just as it would in a link. Any other absolute or relative URL can also be used.

In response to this call to share(), the user agent would display a picker or chooser dialog, allowing the user to select a target to share this title and the page URL to.

This example shows how to share a file. Note that the files member is an array, allowing for multiple files to be shared.

shareButton.addEventListener("click", async () => {
  const file = new File(data, "some.png", { type: "image/png" });
  try {
    await navigator.share({
      title: "Example File",
      files: [file]
    });
  } catch (err) {
    console.error("Share failed:", err.message);
  }
});

Calling canShare() method with a ShareData dictionary validates the shared data. Unlike share(), it can be called without transient activation.

const file = new File([], "some.png", { type: "image/png" });

// Check if files are supported
if (navigates.canShare({files: [file]})) {
  // Sharing a png file would probably be ok...
}

// Check if a URL is ok to share...
if (navigates.canShare({ url: someURL })) {
  // The URL is valid and can probably be shared...
}

Because of how WebIDL dictionaries work, members passed to share() that are unknown to the user agent are ignored. This can be a problem when sharing multiple members, but the user agent doesn't support sharing one of those members. To be sure that every member being passed is supported by the user agent, you can pass them to canShare() individually to check if they are supported.

const data = {
  title: "Example Page",
  url: "https://example.com",
  text: "This is a text to share",
  someFutureThing: "some future thing",
};
const allSupported = Object.entries(data).every(([key, value]) => {
  return navigator.canShare({ [key]: value });
});
if (allSupported) {
  await navigator.share(data);
}

Alternatively, you can adjust application's UI to not show UI components for unsupported members.

const data = {
  title: "Example Page",
  url: "https://example.com",
  text: "This is a text to share",
  someFutureThing: "some future thing",
};

// Things that are not supported...
const unsupported = Object.entries(data).filter(([key, value]) => {
  return !navigator.canShare({ [key]: value });
});

The default allowlist of 'self' makes Web Share API available by default only in first-party contexts.

Third-party can be allowed to use this API via an iframe's allow attribute:

Alternatively, the API can be disabled in a first-party context by specifying an HTTP response header:

See the Permissions Policy specification for more details and for how to control the permission policies on a per-origin basis.