What the Web Share API does

The Web Share API gives web apps access to the same system-level share capabilities that platform-specific apps have. Using it, a web app can send links, text, and files to other applications installed on the device, with the operating system handling the share flow. The API is straightforward: a single share() call opens the native sharing sheet, letting users pick their preferred destination.

The share action must be triggered by a user gesture such as a click—calling it from an onload handler will not work. The page must also be served over HTTPS. Sharing from a third-party iframe works, but only if the allow attribute on the iframe includes the web-share value, as shown below:

<iframe allow="web-share" src="..."></iframe>

The API supports sharing URLs, text, or files. Always use feature detection before calling a method rather than relying on a static support check, because browser support varies by method and platform.

Sharing links and text

To share a link or some text, call navigator.share() with a properties object. To keep the browser from throwing a TypeError, this object needs to include at least one of the fields title, text, url, or files. You can share a URL by itself or plain text without any URL, and all the fields can be combined when the scenario calls for it.

The flexibility becomes clear when a user picks an email client from the share sheet. In that case, the title value is a natural fit for the email subject, text can become the message body, and any files you passed are added as attachments.

Your own page can share one of two URLs: the full address from the browser address bar, or a canonical URL you control. Prefer to share the canonical URL for content that appears at multiple routes. Instead of sending document.location.href, read the page's <link rel="canonical"> or the <meta> equivalent and share that. It avoids redirects and ensures recipients get the right experience for their device. For example, a friend opening a link that was shared from a mobile view should land on a desktop-friendly page when on a computer.

Sharing files

To include files in a share action, first verify support with navigator.canShare(). When checking feature support for file sharing, test for canShare() and not share(). The object passed to canShare() carries only the files property. The call itself looks like this:

const files = [file1, file2];
if (navigator.canShare({ files })) {
  await navigator.share({ files });
}

The API accepts certain types of audio, images, PDFs, video, and text files today. The full list is maintained in the Chromium documentation on permitted file extensions, and more file types may be added in the future.

A case study: Santa Tracker

Google's Santa Tracker project used the Web Share API on Android starting in 2016. The development team previously removed mobile share buttons because they could not justify multiple share targets in a constrained UI. The Web Share API replaced those many options with one button, saving space:

Once that single action header was in place, the team observed sharing users around 20% more often compared with users who had the feature disabled. Santa Tracker is open source, so the implementation is available to inspect.

Checking support and getting involved

Browser support is not uniform across the API's parts. navigator.share() arrived in Chrome 93 and Safari 12.1, while navigator.canShare() is present from Chrome 93 and Safari 14. Support numbers refer to the rough baseline and may include caveats per platform; consult the browser support entries for canShare() and share() for details.

If you start using the Web Share API in your own application, mention it publicly in support. The Chromium team relies on such signals to prioritize upcoming features and to communicate to other browser vendors how important these capabilities are.